Exakt matchning av adresser i Angular

Attributet routerLinkActive kontrollerar faktiskt URL:en för partiell matchning, inte exakt matchning. Låt som exempel våra länkar se ut så här:

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

I det här fallet, om vi befinner oss på URL:en /blog/page/ kommer båda länkarna att vara stiliserade.

För att tvinga länkadresser att kontrollera för exakt matchning kan du använda attributet routerLinkActiveOptions. Se hur man använder det:

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>