Ionic5/Angular跳转餐厅详情页如何保持restaurants tab激活

你可以通过以下两种常见方式实现需求：

• 方法1：将详情页配置为restaurants路由的子路由（官方推荐）
  Ionic的ion-tab默认会自动匹配当前路由是否属于对应tab根路由的子路径，只要路径符合规则就会自动激活对应tab，你只需修改路由配置即可：

  // 你的路由配置文件（通常是app-routing.module.ts）
  const routes: Routes = [
    {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    },
    {
      path: 'home',
      loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
    },
    {
      path: 'restaurants',
      children: [
        {
          path: '',
          loadChildren: () => import('./restaurants/restaurants.module').then(m => m.RestaurantsPageModule)
        },
        {
          path: ':id', // 餐厅详情页路由
          loadChildren: () => import('./restaurant-detail/restaurant-detail.module').then(m => m.RestaurantDetailPageModule)
        }
      ]
    },
    {
      path: 'contact',
      loadChildren: () => import('./contact/contact.module').then(m => m.ContactPageModule)
    }
  ]
  

  配置完成后访问/restaurants/123这类详情路径时，restaurants对应的tab会自动保持激活状态。

• 方法2：手动控制tab激活状态（兜底方案）
  如果业务场景不适合配置子路由，可以通过监听路由变化手动设置激活状态：
  首先修改tab模板代码：

  <!-- app.component.html -->
  <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" [selected]="isRestaurantActive">
        <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>
  

  再添加组件逻辑判断路由：

  // app.component.ts
  import { Router, NavigationEnd } from '@angular/router';
  import { filter } from 'rxjs/operators';
  
  export class AppComponent {
    isRestaurantActive = false;
  
    constructor(private router: Router) {
      this.router.events.pipe(
        filter(event => event instanceof NavigationEnd)
      ).subscribe((event: NavigationEnd) => {
        // 只要当前路由属于餐厅相关的路径，就激活对应tab
        this.isRestaurantActive = event.url.startsWith('/restaurants') || event.url.startsWith('/restaurant');
      });
    }
  }
  

内容的提问来源于stack exchange，提问作者SIKLI Théo