Angular'da Tam URL Eşleşmesi

routerLinkActive özelliği aslında URL'yi tam eşleşme için değil, kısmi eşleşme için kontrol eder. Örnek olarak linklerimizin şu şekilde olduğunu varsayalım:

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

Bu durumda, eğer /blog/page/ URL'sinde isek, her iki link de stil alacaktır.

Link adreslerinin tam eşleşme için kontrol edilmesi, routerLinkActiveOptions özelliği ile sağlanabilir. Nasıl kullanıldığına bakın:

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>