typescript - Angular routerLinkActive med inbäddade rutter

Jag har problem. På min sida har jag routen /productsList. Och jag har 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>

När jag klickar på ett objekt i listan ändras rutten, till exempel: /productsList/product och objektet är valt, men min:

<a  class="list-group-item list-group-item-action"  [routerLink]="['/productsList']"   routerLinkActive="active"  > sad</a>

Är alltid markerad eftersom jag alltid har /productsList, jag vill att den ska vara inaktiverad när jag har en inbäddad rutt.

Svar #1

Du måste definiera [routerLinkActiveOptions]="{ exact: true }" för att göra skillnaden mellan /productsList och /productsList/product:

<a class="list-group-item list-group-item-action" [routerLink]="['/productsList']" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">not sad</a>

Relaterade artiklar