Correspondance exacte des URLs dans Angular
L'attribut routerLinkActive vérifie en réalité
l'URL non pas sur une correspondance exacte,
mais sur une correspondance partielle. Supposons pour l'exemple que nos
liens ressemblent à ceci :
<nav>
<a
routerLink="/blog/"
routerLinkActive="active"
>
Aaaa
</a>
<a
routerLink="/blog/page/"
routerLinkActive="active"
>
Bbbb
</a>
</nav>
Dans ce cas, si nous sommes sur l'URL
/blog/page/, les deux liens
seront stylisés.
Forcer la vérification des URLs des liens pour une correspondance exacte
est possible grâce à l'attribut routerLinkActiveOptions.
Voyez comment l'utiliser :
<nav>
<a
routerLink="/blog/"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
Aaaa
</a>
<a
routerLink="/blog/page/"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
Aaaa
</a>
</nav>
Vérifiez que par défaut, les liens ne détectent pas la correspondance exacte.
Forcez les liens à vérifier la correspondance exacte.