36. Paramètres optionnels et Paramètres de requête
En plus des paramètres de route obligatoires (ex : /user/:id), le routage Angular supporte deux façons de gérer les données facultatives passées via l'URL : les paramètres Matrix optionnels et les Query Parameters.
1. Paramètres Matrix optionnels
Utiles pour passer une configuration à un segment de route spécifique (ex : /products;filter=sale;sort=price).
Navigation
typescript // Passer des paramètres matrix via un objet dans le tableau de chemin this.router.navigate(['/products', { filter: 'sale', sort: 'price' }]);
Accès
Les paramètres matrix sont accessibles via paramMap sur ActivatedRoute, tout comme les paramètres obligatoires.
typescript const filter = this.route.snapshot.paramMap.get('filter'); // 'sale'
2. Paramètres de requête (Query Parameters)
Les query parameters (ex : /search?q=angular&page=2) sont généralement utilisés pour le filtrage, le tri ou la pagination, car ils s'appliquent globalement à la route et à ses enfants.
Navigation
Les query parameters sont passés via l'objet queryParams dans les options de navigation.
typescript this.router.navigate(['/search'], { queryParams: { q: 'angular', page: 2 } });
Accès
Ils sont accessibles via l'Observable queryParamMap d' ActivatedRoute.
typescript
// component.ts
ngOnInit(): void {
this.route.queryParamMap.subscribe(params => {
const query = params.get('q');
const page = params.get('page');
console.log(Recherche pour '${query}' sur la page ${page});
});
}
Note : Les Query Parameters (via queryParamMap) sont fortement préférés aux paramètres matrix car ils sont plus simples à gérer et plus conventionnels pour les fonctionnalités de recherche/filtrage.