Coincidencia exacta de direcciones en Angular
El atributo routerLinkActive en realidad
verifica la URL no por coincidencia exacta,
sino por coincidencia parcial. Supongamos para el ejemplo que nuestros
enlaces se ven así:
<nav>
<a
routerLink="/blog/"
routerLinkActive="active"
>
Aaaa
</a>
<a
routerLink="/blog/page/"
routerLinkActive="active"
>
Bbbb
</a>
</nav>
En este caso, si nos encontramos en la URL
/blog/page/, ambos enlaces serán estilizados.
Se puede forzar a verificar las direcciones de los enlaces por coincidencia exacta
usando el atributo routerLinkActiveOptions.
Observen cómo usarlo:
<nav>
<a
routerLink="/blog/"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
Aaaa
</a>
<a
routerLink="/blog/page/"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
Aaaa
</a>
</nav>
Verifique que, por defecto, los enlaces no capturan la coincidencia exacta.
Haga que los enlaces verifiquen la coincidencia exacta.
