Coincidencia exacta de direcciones en Angular

El atributo routerLinkActive en realidad verifica la URL no por coincidencia exacta, sino por coincidencia parcial. Supongamos para el ejemplo que nuestros enlaces se ven así:

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

En este caso, si nos encontramos en la URL /blog/page/, ambos enlaces serán estilizados.

Se puede forzar a verificar las direcciones de los enlaces por coincidencia exacta usando el atributo routerLinkActiveOptions. Observen cómo usarlo:

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>