带有嵌套路由的 Angular routerLinkActive

Question

我有问题。在我的页面上，我有路由/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，我希望在我有嵌套路由时禁用。

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>