Question

我要去（使用routerLink)到对象的详细信息页面，但它不是ID，而是undefined出现，并且不知道如何正确执行，这是我的代码：

标签路由

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

第 A 页（从）：

...
bookId = null
bookRef: AngularFirestoreDocument

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

HTML

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

第 B 页（TO）：

...
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
        });
}
...

我得到的错误是：

错误错误：未捕获（承诺）：FirebaseError：[代码=未找到]：没有文件可更新：项目/书-29320f /数据库/（默认）/文档/书/未定义 FirebaseError：没有要更新的文档： projects / books-29320f / databases /（默认）/ documents / books / undefined

在我的书的详细信息页面的网址上，上面写着：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添加到BookDetailPage中的BookDetailPageModule路径中：

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转到详细信息页面？

2 个答案: