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

routerLinkActive 속성은 실제로 URL을 정확히 일치하는지 확인하는 것이 아니라, 부분적으로 확인합니다. 예를 들어 우리의 링크가 다음과 같이 생겼다고 가정해 보겠습니다:

<nav>
	<a
		routerLink="/blog/"
		routerLinkActive="active"
	>
		Aaaa
	</a>
	<a
		routerLink="/blog/page/"
		routerLinkActive="active"
	>
		Bbbb
	</a>
</nav>

이 경우, URL /blog/page/에 있을 때 두 링크 모두 스타일이 적용됩니다.

링크 주소를 정확히 일치하는지 확인하도록 강제하려면 routerLinkActiveOptions 속성을 사용하면 됩니다. 사용 방법을 살펴보세요:

<nav>
	<a
		routerLink="/blog/"
		routerLinkActive="active"
		[routerLinkActiveOptions]="{exact:true}">
			Aaaa
	</a>
	<a
		routerLink="/blog/page/"
		routerLinkActive="active"
		[routerLinkActiveOptions]="{exact:true}">
			Aaaa
	</a>
</nav>

기본적으로 링크가 정확히 일치하지 않음을 확인하세요.

링크가 정확히 일치하는지 확인하도록 만드세요.