การกำหนดเส้นทางในแองกูลาร์

บทเรียนนี้จะแนะนำการกำหนดเส้นทางของแองกูลาร์ ซึ่งเป็นวิธีนำทางระหว่างมุมมองและจัดการที่อยู่เว็บในแอปของคุณ

การกำหนดเส้นทางคืออะไร

การกำหนดเส้นทางช่วยให้คุณนำทางระหว่างคอมโพเนนต์หรือหน้าต่าง ๆ ในแอปพลิเคชันแองกูลาร์ตามที่อยู่เว็บ

การตั้งค่าโมดูลการกำหนดเส้นทาง

สร้างโมดูลการกำหนดเส้นทางเมื่อเริ่มต้นโครงการ หรือสร้างภายหลังโดยใช้ Angular CLI:

ng generate module app-routing --flat --module=app

การกำหนดเส้นทาง

เส้นทางจะถูกกำหนดเป็นอาร์เรย์ของพาธที่เชื่อมโยงกับคอมโพเนนต์:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

ช่องแสดงผลเราเตอร์

ใช้ <router-outlet></router-outlet> เพื่อแสดงผลคอมโพเนนต์ที่ตรงกันแบบไดนามิกตามเส้นทาง

<router-outlet></router-outlet>

การนำทางด้วย routerLink

นำทางระหว่างมุมมองโดยใช้ไดเรกทีฟ routerLink:

<a routerLink="/home">Home</a>

การนำทางโดยใช้โค้ด

คุณยังสามารถนำทางโดยใช้โค้ดผ่านบริการการกำหนดเส้นทางได้:

this.router.navigate(['/home']);

เส้นทางไวลด์การ์ด

จัดการพาธที่ไม่ได้กำหนดไว้โดยใช้เส้นทางไวลด์การ์ดเพื่อแสดงหน้า 404 แบบกำหนดเอง:

{ path: '**', component: PageNotFoundComponent }

สรุป

ตอนนี้คุณเข้าใจพื้นฐานของการกำหนดเส้นทางแล้ว และสามารถกำหนดเส้นทางในแอปแองกูลาร์ได้อย่างมีประสิทธิภาพ ทำได้ดีมาก