[英]How can I keep a mat-tab active when I navigate to a subchild of its route in Angular?
I am using mat-tab-nav-bar
to show 2 tabs as listed below:我正在使用
mat-tab-nav-bar
来显示下面列出的 2 个选项卡:
tabs.component.html : 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 :选项卡.component.ts :
routeLinks = [
{
label: 'Overview',
link: '/tabs/overview',
index: 0
},
{
label: 'Products',
link: '/tabs/products',
index: 1
},
];
app.routing.module.ts :应用程序路由模块.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'
}
];
When I am navigating to /products, the tab is active.当我导航到 /products 时,该选项卡处于活动状态。 But when I am navigating to /products/:productID, the tab is not active.
但是当我导航到 /products/:productID 时,该选项卡未激活。 How can I keep it active since it is in the /products route?
因为它在 /products 路线中,我怎样才能让它保持活跃?
I also tried to make the /products/:productID child of /products route but it does not work.我还尝试使 /products/:productID 成为 /products 路线的子级,但它不起作用。 Updated here in my app-routing.module.ts :
在我的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'
}
];
To have child routes also activate your routerLinkActive
, you need to set:要让子路由也激活您的
routerLinkActive
,您需要设置:
[routerLinkActiveOptions]="{ exact: false }"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.