Точно съвпадение на адреси в 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>

Проверете, че по подразбиране връзките не улавят точно съвпадение.

Накарайте връзките да проверяват за точно съвпадение.