web-dev-qa-db-fra.com

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

J'essaie d'implémenter routerLinkActive dans mon application, mais je suis confronté au problème suivant: la classe est activée pour plusieurs 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 ça ressemble

enter image description here Ici, c'est à quoi ça ressemble dans dev-tools enter image description here Et ma barre d'adresse

enter image description here

Est-ce que je manque quelque chose parce que je fais comme expliqué dans documents angulaires .

angularrouterlinkactive
32
Jorawar Singh

Essayez de définir [routerLinkActiveOptions]="{exact: true}" en 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 marche ?

RouterLinkActive tronque la route en cours et essaie de faire correspondre ses parties avec les RouterLinks que vous avez fournis. Dans cet esprit, route / sera apparié n'importe où car c'est le parent même de tous les autres itinéraires (comme /about, /contact, etc. comme il s'agit de / + route-path). Pour simplifier, ce n'est pas un bug, c'est parfois une fonctionnalité nécessaire dans votre application pour faire correspondre plusieurs itinéraires. Pour éviter cela, vous pouvez spécifier que routerLinkActiveOptions corresponde exactement à votre itinéraire. Cela signifie que cela ne correspondra pas aux routes parentes mais tentera uniquement de trouver le routeurLink fourni pour cette route exacte.

93
ranakrunal9