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

routerlinkactiveoptions

Question

Estoy tratando de implementar routerLinkActive en mi aplicación pero estoy enfrentando el problema de que establece la clase activa en varios 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 como se ve.

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

Me estoy perdiendo algo porque estoy haciendo lo que se explica en documentos angulares .

Answer 1

Intente configurar [routerLinkActiveOptions]="{exact: true}" en HTML como se muestra 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>

Como funciona ?

RouterLinkActive fragmenta la ruta actual e intenta hacer coincidir sus partes con los RouterLinks que proporcionó. Teniendo esto en cuenta, la ruta / se combinará en cualquier lugar, ya que es la principal para todas las demás rutas (como /about , /contact , etc., ya que consiste en / + route-path ). Para simplificar, no es un error, a veces es una funcionalidad necesaria en su aplicación para que coincida con múltiples rutas. Para evitarlo, puede especificar las routerLinkActiveOptions de routerLinkActiveOptions para que coincidan exactamente con la ruta en la que se encuentra. Eso significa que no va a coincidir con las rutas principales, pero solo intentará encontrar el RouterLink provisto para esta ruta exacta.