在Angular中，当我导航到其路由的子子代时，如何保持一个mat-tab的活动状态？

Question

我正在使用 mat-tab-nav-bar 显示2个标签，如下图所示。

tabs.component.html:

<nav mat-tab-nav-bar>
  <a
    mat-tab-link
    *ngFor="let routeLink of routeLinks; let i = index"
    [routerLink]="routeLink.link"
    routerLinkActive
    #rla="routerLinkActive"
    [active]="rla.isActive"
    (click)="activeLinkIndex = i"
    [routerLinkActiveOptions]="{ exact: true }"
  >
    {{ routeLink.label | translate }}
  </a>
</nav>

tabs.component.ts:

routeLinks = [
      {
        label: 'Overview',
        link: '/tabs/overview',
        index: 0
      },
      {
        label: 'Products',
        link: '/tabs/products',
        index: 1
      },
    ];

app.routing.module.ts:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsComponent,
    children: [
      {
        path: 'overview',
        children: [
          {
            path: '',
            loadChildren: () => import('src/pages/overview/overview.module').then(m => m.OverviewModule)
          }
        ]
      },
      {
        path: 'products',
        children: [
          {
            path: '',
            loadChildren: () => import('src/pages/products/products.module').then(m => m.ProductsModule)
          }
        ]
      },
      {
        path: 'products/:productID',
        children: [
          {
            path: '',
            loadChildren: () => import('src/pages/products/product.module').then(m => m.ProductModule)
          }
        ]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/overview',
    pathMatch: 'full'
  }
];

当我导航到products时，标签页是活动的，但当我导航到products:productID时，标签页不是活动的。但是当我导航到products:productID时，标签不活跃。既然它在products路由中，我怎样才能让它保持活跃？

我也试着把products:productID变成products路由的子路由，但是不行。在这里更新了我的 app-routing.module.ts:

    const routes: Routes = [
      {
        path: 'tabs',
        component: TabsComponent,
        children: [
          {
            path: 'overview',
            children: [
              {
                path: '',
                loadChildren: () => import('src/pages/overview/overview.module').then(m => m.OverviewModule)
              }
            ]
          },
          {
            path: 'products',
            children: [
              {
                path: '',
                loadChildren: () => import('src/pages/products/products.module').then(m => m.ProductsModule)
              },
              {
                path: ':productID',
                loadChildren: () => import('src/pages/product/product.module').then(m => m.ProductModule)
              }
            ]
          }
  {
    path: '',
    redirectTo: '/tabs/overview',
    pathMatch: 'full'
  }
];

Answer 1

要拥有子路由，也要激活你的 routerLinkActive，你需要设置。

[routerLinkActiveOptions]="{ exact: false }"