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

Атрибут routerLinkActive на самом деле проверяет URL не на точное совпадение, а на частичное. Пусть для примера наши ссылки выглядят так:

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

В этом случае, если мы находимся на урле /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>