Ionic 4 路由问题答案

【问题标题】：Ionic 4 routing issueIonic 4 路由问题
【发布时间】：2023-03-11 03:59:01
【问题描述】：

我已经启动了一个带有标签模板的新 ionic4 ("@ionic/angular": "4.0.0-beta.19") 应用程序。然后我添加了一个新选项卡，在这个选项卡中我在列表中显示了一些数据。每个列表项都重定向到详细信息页面。

当我转到详细信息页面时，一切正常。然后我回到列表视图。如果我想再次进入详细页面，这不起作用（仅在重新加载整个应用程序后）。

这是我的代码：
tabs.router.module.ts

...
  ,
  {
    path: 'tab3',
    children: [
      {
        path: '',
        loadChildren: '../tab3/tab3.module#Tab3PageModule'
      }
    ]
  },
  {
    path: 'account',
    children: [
      {
        path: '',
        loadChildren: '../account/account.module#AccountPageModule'
      },
      {
        path: 'detail/:id',
        loadChildren: './account-detail/account-detail.module#AccountDetailPageModule'
      }
    ]
  },
  ...

tabs.page.html

...
<ion-tab-button tab="account">
  <ion-icon name="send"></ion-icon>
  <ion-label>account</ion-label>
</ion-tab-button>
...

还有我的清单

<ion-list>
<ion-item-sliding *ngFor="let account of accounts">
  <ion-item routerLink="detail/{{account.id}}">
    <ion-label>
      <h3>{{account.title}}</h3>
      <p>{{account.capital | currency}}</p>
    </ion-label>
  </ion-item>
  <ion-item-options side="end">
    <ion-item-option>Bearbeiten</ion-item-option>
    <ion-item-option color="danger" (click)="onDelete(account)">Löschen</ion-item-option>
  </ion-item-options>
</ion-item-sliding>

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

子路由的链接仅在父路由的上下文中可用。以这种方式使用子链接详细信息：

<ion-item routerLink="/account/detail/{{account.id}}">

【讨论】：