我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 路由的 /products/:productID 子级，但它不起作用。在我的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'
}
];