当我导航到 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>

选项卡.component.ts ：

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

应用程序路由模块.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 路线中，我怎样才能让它保持活跃？

我还尝试使 /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 }"