Τιμές παραμέτρων διαδρομών στο component στο Angular

Οι τιμές των παραμέτρων που ορίζουμε στα routes, μπορούν να ληφθούν στην κλάση του component. Ας δούμε πώς μπορεί να γίνει αυτό. Ας υποθέσουμε ότι έχουμε την ακόλουθη διαδρομή με παραμέτρους:

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

Ας λάβουμε την τιμή αυτής της παραμέτρου στην κλάση του component. Εδώ πρέπει να σημειωθεί ότι οι τιμές των παραμέτρων της διαδρομής μπορούν να ληφθούν μόνο στο component που είναι συνδεδεμένο στη διαδρομή. Στην περίπτωσή μας, στη διαδρομή είναι συνδεδεμένο το Aaaa component. Επομένως, θα συνεχίσουμε να εργαζόμαστε με αυτό.

Λοιπόν, για να λάβουμε τις τιμές των παραμέτρων της διαδρομής χρειάζεται να χρησιμοποιήσουμε την υπηρεσία ActivatedRoute. Ας την εισάγουμε στο component μας:

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);
	}
}

Λάβετε τις τιμές των παραμέτρων σας.