Valeurs des paramètres de route dans le composant Angular

Les valeurs des paramètres que nous définissons dans les routes peuvent être récupérées dans la classe du composant. Voyons comment procéder. Supposons que nous ayons la route suivante avec des paramètres :

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

Récupérons la valeur de ce paramètre dans la classe du composant. Il est important de noter que les valeurs des paramètres de route ne peuvent être obtenues que dans le composant associé à la route. Dans notre cas, le composant Aaaa est lié à la route. Nous travaillerons donc avec lui par la suite.

Ainsi, pour obtenir les valeurs des paramètres de route, il faut utiliser le service ActivatedRoute. Importons-le dans notre composant :

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

Injectons le service dans le constructeur :

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

Récupérons l'objet contenant les paramètres :

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

Récupérons la valeur de notre paramètre :

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

Obtenez les valeurs de vos paramètres.