Точное совпадение адресов в Angular

Атрибут routerLinkActive на самом деле проверяет URL не на точное совпадение, а на частичное. Пусть для примера наши ссылки выглядят так:

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

В этом случае, если мы находимся на урле /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>

Проверьте, что по умолчанию ссылки не ловят точное совпадение.

Заставьте ссылки проверять точное совпадение.