Angular에서 주소 정확히 일치시키기

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>