如何在我的离子4应用程序中检索特定的详细信息新闻

Question

我有新闻ionic4应用程序，我在一个页面中列出了来自firestore的所有新闻，我想要的是当我点击其中一个新闻时我想在详细信息页面中显示详细信息我该怎么做？ （我认为必须通过传递id参数，但我不知道怎么做）请帮助我

我的代码如下所示：

films.page.html（此页面是主页）

<ion-header>

  <ion-toolbar color="#9b59b6">
    <ion-title id='raas'>الرئيسية</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <ion-content padding>
        <ion-item *ngFor=" let count of data">
          <h5>{{count.title}}<button >المزيد</button>

            <img src="{{count.image}}">
          </h5>

        </ion-item>

</ion-content>

films.page.ts

import { Component, OnInit, DoBootstrap } from '@angular/core';
import {AngularFirestore} from 'angularfire2/firestore';
import {Observable} from 'rxjs';
import { Router } from '@angular/router';


@Component({
  selector: 'app-films',
  templateUrl: './films.page.html',
  styleUrls: ['./films.page.scss'],
})
export class FilmsPage implements OnInit {
  data: any;


  constructor(public db: AngularFirestore, private router: Router) { }

  ngOnInit() {
    this.getAllPosts().subscribe((data) => {
        this.data = data;
        console.log(data);
    });
  }
  getAllPosts(): Observable<any> {
    return this.db.collection<any>('123').valueChanges ();
  }

}

film-details.page.ts（此页面了解详情）

import { Component, OnInit } from '@angular/core';
import {AngularFirestore} from 'angularfire2/firestore';
@Component({
  selector: 'app-film-details',
  templateUrl: './film-details.page.html',
  styleUrls: ['./film-details.page.scss'],
})
export class FilmDetailsPage implements OnInit {

  constructor(public db: AngularFirestore) { }

  ngOnInit() {
  }
}

tabs.router.module.ts（这是我的路线）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'films',
        children: [
          {
            path: '',
            loadChildren: '../films/films.module#FilmsPageModule'
          },
          {
            path: 'detail/:id',
            loadChildren: '../film-details/film-details.module#FilmDetailsPageModule'
          }
        ]
      },
      {
        path: 'people',
        children: [
          {
            path: '',
            loadChildren: '../people/people.module#PeoplePageModule'
          }
        ]
      },
      {
        path: 'planets',
        children: [
          {
            path: '',
            loadChildren: '../planets/planets.module#PlanetsPageModule'
          }
        ]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/films',
    pathMatch: 'full'
  }
];

@NgModule({
  declarations: [],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule { }

Answer 1

将ID传递到您的详细信息页面的两种方法

1. 在你的HTML中

<a [routerLink]="['/detail', count.id]">{{item.id}}</a>

我假设您的计数包含详细ID，如果没有将count.id替换为您需要传递的详细ID

2. 在你身边

goToDetail(film) {
    this.router.navigate(['/detail', film.id]);
}