Angular routerLinkActive与嵌套路由

时间:2018-12-25 09:52:46

标签: angular typescript

我有问题。在我的页面上,我有路线/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,所以总是被选中,所以我想在嵌套路由时被禁用。

1 个答案:

答案 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>