Comment récupérer les paramètres de requête dans une URL avec Angular ?
Le framework Angular permet de créer des sites Web comme on pourrait le faire en utilisant un langage s'exécutant directement sur le serveur Web, comme PHP. Il doit donc être capable de gérer les mêmes problématiques. La récupération des paramètres dans une URL fait partie des éléments que doit gérer un site Web car cela permet notamment de naviguer entre les pages.
Dans une URL, la forme la plus simple d'encodage des paramètres se fait avec la chaîne "paramètre=valeur". Le caractère "?" indique le début des paramètres et le caractère "&" permet d'indiquer plusieurs paramètres les uns après les autres.
https://www.monsite.fr/fiche?prenom=Jean&nom=Dupont
Avec le framework Angular, on utilise l'observable "this.route.queryParams". Il faut souscrire à cet objet pour pouvoir récupérer les valeurs des paramètres.
prenom: string;
nom: string;
constructor(private route: ActivatedRoute) {
this.route.queryParams.subscribe(params => {
this.prenom = params['prenom'];
//L'attribut prenom contient "Jean"
this.nom = params['nom'];
//L'attribut nom contient "Dupont"
});
}
Lors de la sortie de la version 6 du framework, les équipes de développement ont indiqué dans les notes qu'ils décourageaient l'utilisation de "queryParams" car ils comptaient bientôt déprécier cette fonctionnalité. Il est maintenant recommandé d'utiliser l'objet "this.route.snapshot.paramMap" pour récupérer les valeurs des paramètres dans une URL.
ngOnInit() {
this.prenom = this.route.snapshot.paramMap.get('prenom');
this.nom = this.route.snapshot.paramMap.get('nom');
}
Avec Angular, vous pouvez également indiquer vos paramètres sous forme d'une chaîne de caractères dans laquelle le paramètre et la valeur sont séparés par le caractère "/".
https://www.monsite.fr/fiche/prenom/Jean/nom/Dupont
Pour récupérer les valeurs des paramètres, il faut alors faire appel à l'objet "this.route.snapshot.params".
ngOnInit() {
this.prenom = this.route.snapshot.params.prenom;
this.nom = this.route.snapshot.params.nom;
}