Khớp chính xác địa chỉ trong Angular

Thuộc tính routerLinkActive thực chất kiểm tra URL không phải dựa trên sự khớp chính xác, mà là khớp một phần. Giả sử cho ví dụ các liên kết của chúng ta trông như thế này:

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

Trong trường hợp này, nếu chúng ta ở URL /blog/page/, cả hai liên kết sẽ được áp dụng kiểu.

Để buộc kiểm tra địa chỉ liên kết một cách chính xác có thể sử dụng thuộc tính routerLinkActiveOptions. Hãy xem cách sử dụng nó:

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

Hãy kiểm tra rằng theo mặc định, các liên kết không bắt được sự khớp chính xác.

Hãy buộc các liên kết kiểm tra sự khớp chính xác.