การจัดสไตล์ลิงก์ที่ใช้งานใน Angular

เราสามารถทำให้ลิงก์ที่มี URL ตรงกับแถบที่อยู่ (address bar) โดดเด่นด้วยสไตล์ใดสไตล์หนึ่ง เช่น สี เพื่อจุดประสงค์นี้ Angular ได้เตรียมแอตทริบิวต์พิเศษ RouterLinkActive ไว้

มาดูกันว่ามันทำงานอย่างไร ก่อนอื่นให้นำเข้า (import) มัน:

import { RouterLinkActive } from '@angular/router';

กำหนดในดีโคเรเตอร์ (decorator):

@Component({
	......
	imports: [RouterOutlet, RouterLink, RouterLinkActive],
	......
})

และตอนนี้ให้เพิ่มแอตทริบิวต์นี้ไปยังลิงก์ของเรา:

<nav>
	<a
		routerLink="/aaaa-component"
		routerLinkActive="active"
	>
		Aaaa Component
	</a>
	<a
		routerLink="/bbbb-component"
		routerLinkActive="active"
	>
		Bbbb Component
	</a>
</nav>

ดังที่คุณเห็นในตัวอย่างของเรา ค่าของแอตทริบิวต์คือ active นี่คือชื่อคลาส CSS ที่จะถูกกำหนดให้กับลิงก์ที่ใช้งานอยู่ ตอนนี้เราสามารถจัดสไตล์มันได้ตามต้องการ:

.active {
	color: red;
}

จัดสไตล์ลิงก์ที่ใช้งานในโปรเจคของคุณ