Correspondência exata de URLs no Angular

O atributo routerLinkActive na verdade verifica a correspondência parcial do URL, e não a exata. Vamos supor, por exemplo, que nossos links sejam assim:

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

Neste caso, se estivermos no URL /blog/page/, ambos os links serão estilizados.

É possível forçar a verificação de correspondência exata dos URLs dos links usando o atributo routerLinkActiveOptions. Veja como usá-lo:

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>