Question

我想在页面之间使用ID进行路由。我这样做是[routerLink]。但是，当我运行该应用程序时，出现错误：Error: Cannot find module '../friend/friend-details.module'。我想我没有正确输入路径，但是我不知道该怎么做。因此，我想导航到好友详细信息并传递ID，以便知道它是哪个项目。 friend-details文件夹位于friend文件夹中，因此该路径应实际可用。

page.html

 <ion-card *ngFor="let friend of loadedFriends">
 <ion-avatar  [routerLink]="['/', 'tabs', 'friend', friend.id]" slot="start">
</ion-card>

tabs.router.module.ts

   const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPage,  //render component that holds your tabs
        children: [
           {
        path: 'friend',
        children: [
          {
            path: '',
            loadChildren: '../friend/friend.module#FriendPageModule'
          },
          {
            path: ':friendId',
            loadChildren: '../friend/friend-details.module#FriendDetailsPageModule'  //maybe delete the same page of app.module.ts
          },
        ]
      },

编辑：

我尝试了一种使用click事件的解决方案：

openFriendDetails() {
    this.router.navigate(['friend/:id']);
  }

我从app-routing.module.ts获得访问权限

{ path: 'friend/:id', loadChildren: './friend-details/friend-details.module#FriendDetailsPageModule' },

此更改后，导航将起作用。但是由于朋友详细信息页面被冻结了，我无法使用我的ID，所以我无法再更改页面了。

Answer 1

检查您的friend-details module路径，并将id作为第二个路由器链接参数。例如：[routerLink]="['/tabs/friend', friend.id]"将生成路由/tabs/friend/:friendId，您可以通过ActivatedRoute.params.friendId进入组件

Answer 2

首先，您需要将children更改为此

children: [
          {
            path: '',
            pathMatch: 'full',
            loadChildren: '../friend/friend.module#FriendPageModule'
          },
          {
            path: ':friendId',
            loadChildren: '../friend/friend-details.module#FriendDetailsPageModule'  //maybe delete the same page of app.module.ts
          },
        ]

然后，您还需要在path: '', component: yourcomponent路由中添加FriendDetailsPageModule

Answer 3

您提到：

friend-details文件夹位于friend文件夹中，因此该路径应该实际可用。

您说的话准确吗？如果是这样，则路径应为：

../friend/friend-details/friend-details.module#FriendDetailsPageModule

如何正确实现ID路由？

3 个答案: