Utilisation des paramètres de requête avec Angular Router

Introduction

Lors de la création d'applications, il peut y avoir des scénarios où nous voulons passer des arguments ou des paramètres pour décrire le comportement de la route. Dans Angular, ceux-ci sont appelés paramètres de requête, et ils sont facultatifs. Les paramètres de requête ne doivent pas être confondus avec les paramètres de route ordinaires qui sont des paramètres obligatoires et liés à une seule route.

Pour clarifier la différence entre les paramètres de route et les paramètres de requête, imaginez que vous construisez une application qui stocke des produits. Vous pouvez avoir une route qui ouvre un produit spécifique en utilisant product_id. Vous pouvez également spécifier un paramètre de requête : read_only. Lorsque le read_only est défini sur true, l'utilisateur peut uniquement voir l'enregistrement, tandis que lorsque le read_only est false, l'utilisateur peut également modifier l'enregistrement. De cette façon, en utilisant une seule route, les cas d'utilisation de modification et de visualisation peuvent être gérés. Ici product_id est le paramètre de route et le read_only qui est facultatif est le paramètre de requête.

Prérequis

Pour bien comprendre cet article, il est nécessaire de savoir créer des applications avec Angular. Avoir de l'expérience avec Angular Router, RouterLink et ActivatedRoute sera également utile.

Passer des paramètres de requête avec Router.navigate

Si vous utilisez Router.navigate pour naviguer à travers les routes, utilisez queryParams pour envoyer les paramètres de requête.

Dans l'exemple ci-dessus, si nous voulons que les visiteurs voient la liste des produits triés par popularité, nous utiliserons le code ci-dessous :

En utilisant ce code, l'URL deviendra :

Cependant, il peut y avoir des scénarios où nous devons passer plusieurs paramètres lors de la navigation. Par exemple, si nous voulons trier les produits par popularité et également par prix, nous pouvons utiliser le code ci-dessous :

Cette fois, l'URL deviendra la suivante :

Ceci conclut la façon de définir les paramètres de requête en utilisant queryParams.

Prévenir la perte des paramètres de requête en utilisant queryParamsHandling

Lors de la navigation entre les routes, les paramètres ont tendance à se perdre. Supposons que si nous passons un argument arg0 il ne sera pas transmis lors de la navigation ultérieure. Nous pouvons sauvegarder les paramètres en utilisant le queryParamsHandling et en définissant la valeur sur preserve ou merge.

Dans l'exemple ci-dessus, supposons que nous voulions diriger les visiteurs vers la page des marques depuis celle du produit avec le paramètre de route { order: 'popular' }, tout en conservant les paramètres de route. Pour ce faire, nous pouvons utiliser le queryParamsHandling et le définir sur preserve :

Cela rendra l'URL semblable à :

Ensuite, supposons que nous voulions conserver le paramètre de requête de la route précédente { order: 'popular' }  tout en ajoutant de nouveaux paramètres { price: 'high-to-low' }. Nous pouvons définir le queryParamsHandling sur merge:

Avec le code ci-dessus, l'URL deviendra :

Ici se termine la préservation des paramètres de requête en utilisant queryParamsHandling pour préserver ou fusionner.

Passer des paramètres de requête avec RouterLink

En prenant en considération notre lien précédent, si nous voulons utiliser RouterLink pour naviguer, nous devrons passer les paramètres de requête en utilisant queryParams comme ci-dessous :

Remarquez comment nous passons l'objet à queryParams en utilisant la liaison unidirectionnelle. Nous pouvons également passer un objet entier comme queryParams .

De plus, si nous voulons transmettre ces paramètres de requête lors d'une navigation ultérieure, nous pouvons utiliser l'option queryParamsHandling. Les options possibles pour queryParamsHandling sont merge  et preserve:

Ici, nous avons vu comment passer les queryParams et gérer les paramètres en utilisant queryParamsHandling dans RouterLink.

Lecture des valeurs des paramètres de requête

Jusqu'à présent, nous avons appris comment passer les paramètres de requête dans la route. Ces paramètres étaient facultatifs et servaient à communiquer des informations à la page de destination. Envoyer les paramètres est une chose, mais il est également nécessaire de lire les paramètres à partir de l'URL et de les utiliser.

Dans Angular, nous lisons les paramètres de requête de la route en utilisant la classe ActivatedRoute. ActivatedRoute possède une propriété observable appelée queryParams pour révéler les paramètres de l'URL actuelle.

Supposons que nous ayons affaire à l'URL suivante :

Pour accéder au paramètre de requête order dans le code, nous utilisons le code ci-dessous :

Ici, dans la console, nous verrons la valeur du paramètre de requête order : “popular” affiché. Si nous avons plusieurs paramètres de requête, nous pouvons utiliser la queryParamMap propriété qui renvoie un observable paramsMap objet.

Si nous avons l'URL avec plusieurs paramètres de requête comme :

Nous pouvons accéder à ces paramètres de requête en utilisant le code ci-dessous :

En utilisant l'opérateur de décomposition d'objet ici, nous obtenons le résultat ci-dessous :

Enfin, vous devriez être en mesure de comprendre comment accéder aux paramètres de requête à partir des routes résultantes.

Conclusion

Dans ce tutoriel, nous avons examiné la différence entre les paramètres de requête et les paramètres de route. Nous avons également vu comment transmettre les arguments à travers les routes en tant que paramètres de requête et comment les récupérer sur la page en utilisant queryParams et queryParamsHandling avec Router.navigate et RouterLink. Nous avons également appris à gérer queryParams et queryParamMap avec ActivatedRoute.

Angular nécessite JavaScript à sa base. Si vous souhaitez approfondir vos connaissances sur JavaScript, vous pouvez consulter les blogs suivants :

• Travailler avec JavaScript : comment fonctionnent les classes
• Travailler avec JavaScript : comment fonctionnent les prototypes et l'héritage
• JavaScript : un tutoriel sur la façon d'indexer, de diviser et de manipuler des chaînes de caractères

Bonne programmation !