当我导航到 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 路线中，我该如何保持它的活动状态？

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

当我导航到 Angular 中其路径的子项时，如何保持 mat-tab 处于活动状态？

How can I keep a mat-tab active when I navigate to a subchild of its route in Angular?

angular-routing

angular

angular-router

mat-tab

angular8