Dokładne dopasowanie adresów w Angular
Atrybut routerLinkActive w rzeczywistości
sprawdza URL nie pod kątem dokładnego dopasowania,
ale częściowego. Załóżmy dla przykładu, że nasze
linki wyglądają tak:
<nav>
<a
routerLink="/blog/"
routerLinkActive="active"
>
Aaaa
</a>
<a
routerLink="/blog/page/"
routerLinkActive="active"
>
Bbbb
</a>
</nav>
W tym przypadku, jeśli znajdujemy się pod adresem URL
/blog/page/, stylowane będą oba
linki.
Sprawienie, aby adresy linków były sprawdzane pod kątem dokładnego
dopasowania, można osiągnąć za pomocą atrybutu routerLinkActiveOptions.
Zobacz, jak go używać:
<nav>
<a
routerLink="/blog/"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
Aaaa
</a>
<a
routerLink="/blog/page/"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}">
Aaaa
</a>
</nav>
Sprawdź, że domyślnie linki nie łapią dokładnego dopasowania.
Spraw, aby linki sprawdzały dokładne dopasowanie.
