Pourquoi Angular2 routerLinkActive définit la classe active sur plusieurs liaisons?

Question

Je suis en train de mettre en œuvre routerLinkActive pour mon application, mais je suis confronté à la question qu'il les sets de classe active à de multiples liens. Voici comment je le fais

<ul class="nav nav-tabs">
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

Ici, c'est à quoi il ressemble

Ici c'est la façon dont il regarde dans dev-tools Et ma barre d'adresse

Ai-je raté quelque chose parce que je suis en train de faire comme expliqué dans angulaire docs.

Answer 1

Essayez de définir [routerLinkActiveOptions]="{exact: true}" HTML comme ci-dessous :

<ul class="nav nav-tabs">
  <li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

Comment ça fonctionne ?

RouterLinkActive n'morceau de la route et essayer de faire correspondre les parties avec le RouterLinks que vous avez fournie. Avec cela à l'esprit, itinéraire / sera apparié n'importe où tant que c'est le parent de tous les autres routes (comme /about, /contact, etc. comme il s'agit d' / + route-path). Pour simplifier, c'est pas un bug, c'est parfois un besoin de la fonctionnalité dans votre application pour correspondre à de multiples itinéraires. Pour éviter cela, vous pouvez spécifier l' routerLinkActiveOptions pour correspondre exactement la route que vous êtes sur. Cela signifie qu'il ne va pas correspondre parent des routes, mais ne essayer de trouvé le routerLink prévu à cet itinéraire exact.