การเข้าถึงค่าพารามิเตอร์เส้นทางในคอมโพเนนต์ Angular

ค่าพารามิเตอร์ที่เรากำหนดในเส้นทาง (route) สามารถรับได้ในคลาสคอมโพเนนต์ มาดูกันว่าสามารถทำได้อย่างไร สมมติว่าเรามีเส้นทางพร้อมพารามิเตอร์ดังต่อไปนี้:

app/app.routes.tsconst routes: Routes = [
  { path: 'aaaa/:id', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

มาลองรับค่าพารามิเตอร์นี้ในคลาสคอมโพเนนต์กัน ควรสังเกตว่าค่าพารามิเตอร์เส้นทางสามารถรับได้เฉพาะในคอมโพเนนต์ที่เชื่อมโยงกับเส้นทางนั้นๆ เท่านั้น ในกรณีของเรา คอมโพเนนต์ Aaaa ถูกเชื่อมโยงกับเส้นทาง ดังนั้น เราจะทำงานกับมันต่อไป

ดังนั้น เพื่อรับค่าพารามิเตอร์เส้นทาง จำเป็นต้องใช้เซอร์วิส ActivatedRoute นำเข้า (import) มันมาที่คอมโพเนนต์ของเรา:

app/aaaa/aaaa.component.tsimport { ActivatedRoute} from "@angular/router";

ให้เพิ่มเซอร์วิสนี้เข้าไปในคอนสตรัคเตอร์ (constructor):

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    
  }
}

รับออบเจ็กต์ที่มีพารามิเตอร์:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    console.log(params);
  }
}

รับค่าของพารามิเตอร์ของเรา:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    let id = params['id'];
    console.log(id);
  }
}