Correspondência exata de URLs no Angular
O atributo routerLinkActive na verdade
verifica a correspondência parcial do URL,
e não a exata. Vamos supor, por exemplo, que
nossos links sejam assim:
<nav>
<a
routerLink="/blog/"
routerLinkActive="active"
>
Aaaa
</a>
<a
routerLink="/blog/page/"
routerLinkActive="active"
>
Bbbb
</a>
</nav>
Neste caso, se estivermos no URL
/blog/page/, ambos os links serão
estilizados.
É possível forçar a verificação de
correspondência exata dos URLs dos links
usando o atributo routerLinkActiveOptions.
Veja como usá-lo:
<nav>
<a
routerLink="/blog/"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
Aaaa
</a>
<a
routerLink="/blog/page/"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
Aaaa
</a>
</nav>
Verifique se, por padrão, os links não detectam a correspondência exata.
Force os links a verificarem a correspondência exata.
