¿Por qué Angular2 routerLinkActive establece la clase activa en múltiples enlaces?

Question

¿Por qué Angular2 routerLinkActive establece la clase activa en múltiples enlaces?

Estoy tratando de implementar routerLinkActive en mi aplicación, pero me enfrento al problema de que establece la clase activa en múltiples enlaces. Así es como lo estoy haciendo

<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>

Aquí es cómo se ve

Así es como se ve en dev-tools Y mi barra de direcciones

Me estoy perdiendo algo porque estoy haciendo como se explica en angular docs.

23

angular routerlinkactive

Author: Jorawar Singh, 2016-08-27

Source

1 answers

score 67 · Accepted Answer

Intente establecer [routerLinkActiveOptions]="{exact: true}" a HTML como a continuación:

<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>

¿Cómo funciona ?

RouterLinkActive fragmenta la ruta actual e intenta hacer coincidir sus partes con los RouterLinks que ha proporcionado. Con eso en mente, route / se emparejará en cualquier lugar, ya que es el mismo padre para todas las otras rutas (como /about, /contact, etc. como consiste en / + route-path). Para simplificar, no es un error, a veces es una funcionalidad necesaria en su aplicación para que coincida con varias rutas. Para evitar que, puede especificar el routerLinkActiveOptions para que coincida exactamente con la ruta en la que está. Eso significa que no va a coincidir con las rutas principales, sino que solo intentará encontrar el enlace de ruta proporcionado para esta ruta exacta.