Exakte URL-Übereinstimmung in Angular

Das Attribut routerLinkActive prüft die URL in Wirklichkeit nicht auf exakte Übereinstimmung, sondern auf teilweise Übereinstimmung. Nehmen wir als Beispiel an, unsere Links sehen so aus:

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

In diesem Fall, wenn wir uns unter der URL /blog/page/ befinden, werden beide Links gestylt.

Um die Linkadressen auf exakte Übereinstimmung prüfen zu lassen, kann das Attribut routerLinkActiveOptions verwendet werden. Sehen Sie, wie man es benutzt:

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

Prüfen Sie, dass die Links standardmäßig keine exakte Übereinstimmung erfordern.

Sorgen Sie dafür, dass die Links eine exakte Übereinstimmung prüfen.