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

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

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

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

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

app/app.component.tsimport { RouterLink } from '@angular/router';

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

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink],
  ......
})

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

app/app.component.html<nav>
  <a routerLink="/aaaa/">
    Aaaa
  </a>
  <a routerLink="/bbbb/">
    Bbbb
  </a>
</nav>