การจับคู่ลิงก์ที่ตรงกันทุกประการใน 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>

ตรวจสอบว่าโดยค่าเริ่มต้น ลิงก์จะไม่ตรวจสอบ การจับคู่ที่ตรงกันทุกประการ

บังคับให้ลิงก์ตรวจสอบการจับคู่ที่ตรงกันทุกประการ