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

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

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

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

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

import { ActivatedRoute} from "@angular/router";

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

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		
	}
}

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

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		let params = activateRoute.snapshot.params;
		console.log(params);
	}
}

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

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		let params = activateRoute.snapshot.params;
		let id = params['id'];
		console.log(id);
	}
}

ลองรับค่าพารามิเตอร์ของคุณ