Ionic Tabs同模块标签激活异常问题求助

我在Ionic项目中配置了底部5个标签页（home、about、profile、lob/first、lob/second），前3个来自不同模块，功能与显示均正常；但最后两个标签页均指向同一LobPageModule，点击其中一个时，两个标签会同时被标记为激活状态。我知晓拆分模块可解决此问题，但想咨询是否存在无需拆分模块的解决方案？

相关代码 #

标签页模板代码 #

<ion-tabs>
<ion-tab-bar slot="bottom" color="quaternary" id="tabs-menu">
  <ion-tab-button tab="home">
  <ion-label>Home</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="profile" *ngIf="showMyLob">
  <ion-label>Profile</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="about">
  <ion-label>About</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="lob/first">
  <ion-label>First</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="lob/second">
  <ion-label>SEcond</ion-label>
  </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

标签页路由配置 #

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    canActivate: [OAuthLoginGuard],
    children: [
      { path: '', redirectTo: '/tabs/home', pathMatch: 'full' },
      {
        path: 'home',
        loadChildren: (): Promise<Type<unknown>> => import('../home/home.page.module')
          .then(m => m.HomePageModule),
      },
      {
        path: 'lob/first',
        loadChildren: (): Promise<Type<unknown>> => import('app/lob').then(m => m.LobPageModule),
        canActivate: [OAuthLoginGuard],
      },
      {
        path: 'lob/second',
        loadChildren: (): Promise<Type<unknown>> => import('app/lob').then(m => m.LobPageModule),
        canActivate: [OAuthLoginGuard],
      },
      {
        path: 'about',
        loadChildren: (): Promise<Type<unknown>> => import('../about/about.module')
          .then(m => m.AbnoutModule),
      },
      {
        path: 'profile',
        loadChildren: (): Promise<Type<unknown>> => import('../profile/profile.module')
          .then(m => m.ProfileModule),
        canActivate: [OAuthLoginGuard],
      },
    ],
  },
]

问题核心是Ionic标签页的激活状态基于模块路由路径匹配，两个标签指向同一模块时，路由逻辑会判定为同一页面，导致同时激活。以下两种方法可解决：

方法1：给模块添加动态路由参数区分标签页 #

修改路由配置为带参数的路径，同时在页面内接收参数区分业务逻辑：

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    canActivate: [OAuthLoginGuard],
    children: [
      // 保留其他路由
      {
        path: 'lob/:type', // 修改为带参数的统一路径
        loadChildren: (): Promise<Type<unknown>> => import('app/lob').then(m => m.LobPageModule),
        canActivate: [OAuthLoginGuard],
      },
      // 保留其他路由
    ],
  },
]

标签页按钮的tab属性保持不变，在LobPage中通过路由获取参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const tabType = params.get('type');
    // 根据tabType的值（first/second）执行对应的页面逻辑
  });
}

方法2：手动控制标签页激活状态 #

通过监听路由事件，自定义active属性的判断逻辑：

1. 在TabsPage组件中监听路由变化：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

currentActiveTab: string = '';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    // 提取路由最后一段作为当前标签标识
    this.currentActiveTab = event.urlAfterRedirects.split('/').pop() || '';
  });
}

2. 修改标签页模板，手动绑定active属性：

<ion-tab-button tab="lob/first" [active]="currentActiveTab === 'first'">
  <ion-label>First</ion-label>
</ion-tab-button>

<ion-tab-button tab="lob/second" [active]="currentActiveTab === 'second'">
  <ion-label>Second</ion-label>
</ion-tab-button>

这样就能强制区分两个标签页的激活状态，同时复用同一个LobPageModule。

内容的提问来源于stack exchange，提问作者kiki