带有选项卡的子组件未获得正确的 ID - 离子/角度

Question

我是 ionic 新手，我正在尝试设计一个简单的应用程序来学习。我有一个主页 (MP)，当我单击该页面上的按钮时，我会转到一个新页面 (AP)，并且有选项卡。我的选项卡有两个按钮。第一个按钮只会显示我刚刚重定向到的页面（美联社）。另一个按钮会转到另一个页面 (BP)，其中包含与第一个页面相关的更多内容。

这是我的路线：

const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./main/main.page.component').then((m) => m.MainPage),
  },
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'book/:id', // dynamic route for story details
        loadComponent: () =>
          import('./story/story.component').then((m) => m.StoryComponent),
      },
      {
        path: 'review/:id',
        loadComponent: () =>
          import('./practice/practice.component').then((m) => m.PracticeComponent),
      },
      {
        path: '',
        redirectTo: '/tabs/main',
        pathMatch: 'full',
      },
    ],
  },
];

这是我的标签页：

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button [href]="getBookTabHref()">
      <ion-icon aria-hidden="true" name="book-outline"></ion-icon>
      <ion-label>Book</ion-label>
    </ion-tab-button>

    <ion-tab-button [href]="getReviewTabHref()">
      <ion-icon name="square"></ion-icon>
      <ion-label>Review</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

所以从我的主页我可以正常进入“预订”，并且显示了正确的 ID。但是，当我从那里尝试使用选项卡按钮时，它没有 ID 状态。 我在 chatgpt 的帮助下尝试了一些事情，比如

activeRoute.params.subscribe((params) => {
  this.id = params['id'];
  console.log('subscribe (after navigation end)', this.id);
});, 

但是没有任何作用，我的身份证丢失了。

最佳实践是什么以及如何在应用程序中保留该状态？ 我来自网络世界，所以这个概念对我来说有点奇怪..

谢谢！

Answer 1

为什么获取不到ID参数

参数必须在路由指向的组件中读取。路由“tabs”没有 ID 参数。该参数必须在组件 StoryComponent 或 PracticeComponent 中读取。

解决方案1：使用查询参数

调整 URL，以便将 ID 指定为查询参数：

/tabs/book?id=123

然后可以如下读取ID：

this.route.queryParams.subscribe((params) => {
  this.id = params['id'];
});

解决方案2：在选项卡路由中指定ID

调整您的路线如下：

/tabs/123/book

const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./main/main.page.component').then((m) => m.MainPage),
  },
  {
    path: 'tabs/:id', // <= id param here
    component: TabsPage,
    children: [
      {
        path: 'book', // dynamic route for story details
        loadComponent: () =>
          import('./story/story.component').then((m) => m.StoryComponent),
      },
      {
        path: 'review',
        loadComponent: () =>
          import('./practice/practice.component').then((m) => m.PracticeComponent),
      },
      {
        path: '',
        redirectTo: '/tabs/main',
        pathMatch: 'full',
      },
    ],
  },
];

然后可以在 TabsPage 中读取 ID，如下所示：

this.route.params.subscribe((params) => {
  this.id = params['id'];
});

然后可以在子路由中读取 ID，如下所示：

this.route.parent?.params.subscribe((params) => {
  const id = params['id'];
})