Angular กดแล้วลิงก์ไปหน้าอื่น

บทความนี้สอนเขียน Angular กดแล้วลิงก์ไปหน้าอื่น ด้วย routerLink โดย routerLink เป็น directive ที่ใช้สำหรับการนำทางไปยัง route หรือหน้าอื่นๆ ที่ต้องการได้ โดยต้องกำหนดร่วมกับเส้นทางในไฟล์ app-routing.module มีรายละเอียดดังนี้

 

ตัวอย่าง Angular กดแล้วลิงก์ไปหน้าอื่น

1. สมมติต้องการสร้างลิงก์ไปหน้า product เริ่มจากสร้าง component product ด้วยคำสั่ง

ng g c product

 

2. เพิ่มโค้ดใน app-routing.module.ts ที่อยู่ใน src/app โดย import ProductComponent และเพิ่มเส้นทางกรณี path คือ product ให้เรียกหน้า product หรือ ProductComponent

import { ProductComponent } from './product/product.component';

const routes: Routes = [
  {
    path: 'product',
    component: ProductComponent
  }
];

 

3. ใช้ routerLink เพื่อสร้างลิงก์ที่ไฟล์ app.component.html และรันเว็บไซต์หากสำเร็จเมื่อกดที่ลิงก์ดังกล่าว เว็บไซต์จะไปที่หน้า product

<a routerLink="/product">ไปหน้า Product</a>

 

สรุป Angular กดแล้วลิงก์ไปหน้าอื่น แนะนำให้ใช้ routerLink ร่วมกับการตั้งค่าเส้นทางที่ไฟล์ app-routing.module.ts โดยกำหนด 2 ส่วนคือ path เท่ากับชื่อเส้นทางที่แสดงใน URL และ component คือชื่อ component หรือหน้าใน Angular