我有问题。在我的页面上,我有路线/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
并且项目已选中,但是我的:
<a class="list-group-item list-group-item-action" [routerLink]="['/productsList']" routerLinkActive="active" > sad</a>
因为总是有/productsList
,所以总是被选中,所以我想在嵌套路由时被禁用。
答案 0 :(得分:2)
您必须定义[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>