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 :

app/app.component.html<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 :

app/app.component.html<nav>
  <a
    routerLink="/blog/"
    routerLinkActive="active"
    [routerLinkActiveOptions]="{exact:true}">
      Aaaa
  </a>
  <a
    routerLink="/blog/page/"
    routerLinkActive="active"
    [routerLinkActiveOptions]="{exact:true}">
      Aaaa
  </a>
</nav>