Angular routerLinkActive與嵌套路由

Question

我有問題。 在我的頁面上，我有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 ，因此我想在嵌套路由時將其禁用。

Answer 1

您必須定義[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>