Angularでの正確なURLマッチング

属性 routerLinkActive は実際には、 URLを完全一致ではなく部分一致でチェックします。例として、私たちのリンクが次のようになっているとします:

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

この場合、URLが /blog/page/ の場合、両方のリンクにスタイルが適用されます。

リンクアドレスを完全一致でチェックさせるには、属性 routerLinkActiveOptions を使用します。使用方法は以下の通りです:

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>

Задание 1

デフォルトではリンクが完全一致をチェックしていないことを確認してください。

Задание 2

リンクに完全一致をチェックさせてください。