Точно съвпадение на адреси в Angular

Атрибутът routerLinkActive всъщност проверява URL не за точно съвпадение, а за частично. Нека за пример нашите връзки изглеждат така:

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

В този случай, ако се намираме на URL /blog/page/ ще бъдат стилизирани и двете връзки.

Можем да накараме проверката на адресите на връзките да бъде за точно съвпадение с помощта на атрибута routerLinkActiveOptions. Вижте как се използва:

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>