[英]How can I keep a mat-tab active when I navigate to a subchild of its route in Angular?
我正在使用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'
}
];
要讓子路由也激活您的routerLinkActive
,您需要設置:
[routerLinkActiveOptions]="{ exact: false }"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.