ลิงก์สำหรับการกำหนดเส้นทางใน Angular

ในบทเรียนที่ผ่านมา เราเคยพิมพ์ URL ลงในแถบที่อยู่ด้วยมือ ตอนนี้มาสร้างลิงก์ที่เมื่อคลิกแล้วจะแสดงคอมโพเนนต์ต่างๆ กัน

สำหรับการนี้ เราจะสร้างลิงก์ในแบบพิเศษ เหตุผลคือเราไม่ต้องการการเปลี่ยนเส้นทางด้วยลิงก์จริงๆ เราแค่อยากให้ Angular แสดงอีกคอมโพเนนต์หนึ่ง, เปลี่ยน URL ในแถบที่อยู่ของเบราว์เซอร์ และไม่รีเฟรชหน้าเว็บไซต์

ดังนั้นแทนที่จะใช้แอตทริบิวต์ดั้งเดิม href เราจะใช้แอตทริบิวต์ของ Angular คือ RouterLink

สำหรับการนี้เราต้องนำเข้า它:

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

ประกาศในเดโคเรเตอร์:

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

ตอนนี้เราสามารถสร้างลิงก์ของเราได้:

<nav>
	<a routerLink="/aaaa/">
		Aaaa
	</a>
	<a routerLink="/bbbb/">
		Bbbb
	</a>
</nav>

สร้างลิงก์สำหรับสลับแสดงคอมโพเนนต์ของคุณ