Corrispondenza esatta degli URL in Angular

L'attributo routerLinkActive in realtà verifica l'URL non per una corrispondenza esatta, ma parziale. Supponiamo, ad esempio, che i nostri link appaiano così:

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

In questo caso, se ci troviamo all'URL /blog/page/, entrambi i link risulteranno attivi e stilizzati.

Per forzare la verifica degli URL dei link per una corrispondenza esatta, possiamo utilizzare l'attributo routerLinkActiveOptions. Guardate come usarlo:

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

Verificate che, per impostazione predefinita, i link non richiedano una corrispondenza esatta.

Forzate i link a verificare la corrispondenza esatta.