I have problem. On my page, I have route /productsList
. And I have 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>
When I click on the some Item of list, route is changed example: /productsList/product
and item is selected, but my :
<a class="list-group-item list-group-item-action" [routerLink]="['/productsList']" routerLinkActive="active" > sad</a>
Is always selected because I always have /productsList
, I want when I have nested route to be disable.
您必须定义[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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.