Pencocokan Tepat Alamat di Angular

Atribut routerLinkActive sebenarnya tidak memeriksa URL untuk kecocokan tepat, tetapi untuk kecocokan parsial. Misalnya, mari anggap tautan kita terlihat seperti ini:

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

Dalam kasus ini, jika kita berada di URL /blog/page/, kedua tautan akan tergaya (mendapatkan style aktif).

Untuk memaksa memeriksa alamat tautan untuk kecocokan tepat, kita dapat menggunakan atribut routerLinkActiveOptions. Lihat cara menggunakannya:

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>