Dokładne dopasowanie adresów w Angular

Atrybut routerLinkActive w rzeczywistości sprawdza URL nie pod kątem dokładnego dopasowania, ale częściowego. Załóżmy dla przykładu, że nasze linki wyglądają tak:

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

W tym przypadku, jeśli znajdujemy się pod adresem URL /blog/page/, stylowane będą oba linki.

Sprawienie, aby adresy linków były sprawdzane pod kątem dokładnego dopasowania, można osiągnąć za pomocą atrybutu routerLinkActiveOptions. Zobacz, jak go używać:

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>