Ionic 5 / Angular 活动链接 ion-tab-button答案

【问题标题】：Ionic 5 / Angular active link ion-tab-buttonIonic 5 / Angular 活动链接 ion-tab-button
【发布时间】：2021-11-10 10:46:06
【问题描述】：

我的 app.component.html 中有一个像这样的 ion-tab 显示：

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Accueil</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="restaurants">
      <ion-icon name="storefront-outline"></ion-icon>
      <ion-label>Restaurants</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
      <ion-icon name="people-outline"></ion-icon>
      <ion-label>Contact</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

每个像餐馆一样的“标签”都是一个有自己路由的页面。当我导航到“/restaurant”时，ion-tab 是 ative。我有另一个页面显示一家餐厅，但是当我导航到此页面时，与 /restaurant 链接的选项卡未激活。

您是否有任何想法将 /restaurant 标签设置为活动状态？

谢谢:)

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

您需要确保“one restaurant”页面是“/restaurant”路由的子路由。喜欢：

// restaurants.module.ts
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: RestaurantsPage
      },
      {
        path: 'restaurants/:name',
        component: SingleRestaurantPage
      }
    ]
  }
];

作为参考，你可以查看这个演示库：https://github.com/servrox/demo-ionic-tab-routing

【讨论】：