如何通过 Ionic 4 上的 routerLink 转到详细信息页面？

Question

我要去（使用 routerLink) 到对象的详细信息页面，但不是 ID，它显示 undefined，不知道该怎么做正确，这是我的代码：

选项卡路由

{
    path: 'book/:id',
    loadChildren: '../book-detail/book-detail.module#BookDetailPageModule',
    pathMatch: 'full'
}

第页（来自）：

...
bookId = null
bookRef: AngularFirestoreDocument

constructor(
    private route: ActivatedRoute,
    private af: AngularFirestore,
    private service: BookService
) { }
...

HTML

<ion-card [routerLink]="['/book/', id]" routerDirection="forward">

页B（至）：

...
ngOnInit() {
    this.bookId = this.route.snapshot.paramMap.get('id');
    if (this.bookId) {
        this.loadBook(this.bookId);
    }
}

loadBook(bookId) {
    this.af.collection<Book>('books')
        .doc<Book>(bookId)
        .valueChanges()
        .subscribe(data => {
            this.book = data
        });
}
...

我得到的错误是：

ERROR Error: Uncaught (in promise): FirebaseError: [code=not-found]: No document to update: projects/books-29320f/databases/(default)/documents/books/undefined FirebaseError: No document to update: projects/books-29320f/databases/(default)/documents/books/undefined

在我的 url 书的详细信息页面上，它说：http://localhost:8100/book/undefined

更新 2：

书籍详细信息模块：

const routes: Routes = [
  {
    path: '',
    component: BookDetailPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [BookDetailPage]
})
export class BookDetailPageModule {}

Answer 1

您应该将 :id 添加到 BookDetailPageModule 中的 BookDetailPage 路径：

const routes: Routes = [
  {
    path: ':id',
    component: BookDetailPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [BookDetailPage]
})
export class BookDetailPageModule {}

Answer 2

最终解决：

我不知道它只是为了放这个代码：

<ion-card [routerLink]="['book/', book.id]" routerDirection="forward">

而不是我所做的（见我的问题）

如何通过 Ionic 4 上的 routerLink 转到详细信息页面？

How to go to a details page via routerLink on Ionic 4?

firebase

ionic4