Exacte overeenkomst van URLs in Angular

Het attribuut routerLinkActive controleert de URL in werkelijkheid niet op exacte overeenkomst, maar op gedeeltelijke overeenkomst. Stel dat onze links er als volgt uitzien:

app/app.component.html<nav>
  <a
    routerLink="/blog/"
    routerLinkActive="active"
  >
    Aaaa
  </a>
  <a
    routerLink="/blog/page/"
    routerLinkActive="active"
  >
    Bbbb
  </a>
</nav>

In dit geval, als we ons op de URL /blog/page/ bevinden, zullen beide links gestileerd worden.

Je kunt links geforceerd laten controleren op exacte overeenkomst met behulp van het attribuut routerLinkActiveOptions. Kijk hoe je het moet gebruiken:

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>