Exakte URL-Übereinstimmung in Angular

Das Attribut routerLinkActive prüft die URL in Wirklichkeit nicht auf exakte Übereinstimmung, sondern auf teilweise Übereinstimmung. Nehmen wir als Beispiel an, unsere Links sehen so aus:

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

In diesem Fall, wenn wir uns unter der URL /blog/page/ befinden, werden beide Links gestylt.

Um die Linkadressen auf exakte Übereinstimmung prüfen zu lassen, kann das Attribut routerLinkActiveOptions verwendet werden. Sehen Sie, wie man es benutzt:

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>