[英]Angular routerLinkActive with nested routes
我有问题。 在我的页面上,我有route /productsList
。 我有list-group
:
<div class="sticky-top">
<ul class="list-group">
<a class="list-group-item list-group-item-action" [routerLink]="['/productsList']" routerLinkActive="active" > sad</a>
<a *ngFor="let products of categoryProduc; let i = index" [routerLink]="[products.name]" routerLinkActive="active" class="list-group-item list-group-item-action">
{{ products.name }}
</a>
</ul>
</div>
当我单击列表中的某些项目时,路线将更改为示例: /productsList/product
和item被选中,但是我的:
<a class="list-group-item list-group-item-action" [routerLink]="['/productsList']" routerLinkActive="active" > sad</a>
始终处于选中状态,因为我始终具有/productsList
,因此我想在嵌套路由时将其禁用。
您必须定义[routerLinkActiveOptions]="{ exact: true }"
才能使/productsList
和/productsList/product
之间有所不同:
<a class="list-group-item list-group-item-action" [routerLink]="['/productsList']" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">not sad</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.