Comment utiliser les paramètres de requête dans Angular

Introduction

Dans Angular, les paramètres de requête permettent de faire passer des paramètres optionnels par n’importe quel itinéraire dans l’application. Les paramètres de requête sont différents des paramètres d’itinéraire ordinaires, qui ne sont disponibles que sur un seul itinéraire et ne sont pas facultatifs (par exemple, /product/:id).

Dans cet article, nous ferons référence à un exemple d’application qui affiche une liste de produits. Nous fournirons des valeurs order et price-range facultatives, que l’élément récepteur pourra lire et sur lesquelles il pourra agir. Les valeurs fournies affecteront l’ordre et le filtrage de la liste de produits.

Utiliser les paramètres de requête avec Router.navigate

Si vous naviguez vers l’itinéraire en utilisant impérativement Router.navigate, vous passerez dans les paramètres de requête avec queryParams.

Dans notre exemple, si nous voulons guider les visiteurs vers les produits grâce à une liste ordonnée par popularité, cela donnerait quelque chose comme :

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular' } });
}

Cela donnera lieu à une URL ressemblant à celle-ci :

http://localhost:4200/products?order=popular

Il est également possible de fournir plusieurs paramètres de requête. Dans notre exemple, si nous voulons guider les visiteurs vers les produits grâce à une liste ordonnée par popularité et filtrée en fonction d’une fourchette de prix élevée, cela ressemblerait à ceci :

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
}

Cela donnera lieu à une URL ressemblant à celle-ci :

http://localhost:4200/products?order=popular&price-range=not-cheap

Vous avez désormais une idée claire de la façon dont queryParams peut être utilisé pour définir les paramètres de requête.

Préserver ou fusionner les paramètres de requête avec queryParamsHandling

Par défaut, les paramètres de requête sont perdus sur toute action de navigation ultérieure. Pour éviter que cela se produise, vous pouvez faire en sorte que queryParamsHandling les 'preserve' ou les 'merge'.

Dans notre exemple, si nous voulons guider les visiteurs depuis une page avec le paramètre de requête { order: 'popular' } jusqu’à la page /users tout en conservant les paramètres de la requête, nous utiliserons 'preserve':

goUsers() {
  this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });
}

Cela donnera lieu à une URL ressemblant à celle-ci :

http://localhost:4200/users?order=popular

Dans notre exemple, si nous voulons guider les visiteurs depuis une page avec le paramètre de requête { order: 'popular' } jusqu’à la page /users en admettant le paramètre de requête { filter : 'new' }, nous utiliserons 'merge' :

goUsers() {
  this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' });
}

Cela donnera lieu à une URL ressemblant à celle-ci :

http://localhost:4200/users?order=popular&filter=new

Vous avez désormais une idée claire de la façon dont queryParamsHandling peut être utilisé pour préserver ou fusionner les paramètres de requête.

Utiliser les paramètres de requête avec RouterLink

Dans notre exemple, si vous utilisez plutôt la directive RouterLink pour naviguer vers l’itinéraire, vous utiliserez queryParams de cette manière :

<a [routerLink]="['/products']" [queryParams]="{ order: 'popular'}">
  Products
</a>

Et dans notre exemple, si vous souhaitez 'preserve' ou 'merge' les paramètres de requête lors d’une navigation ultérieure, vous utiliserez la fonction queryParamsHandling de cette manière :

<a [routerLink]="['/users']"
   [queryParams]="{ filter: 'new' }"
   queryParamsHandling="merge">
  Users
</a>

Vous savez désormais comment queryParams et queryParamsHandling peuvent être utilisés avec RouterLink.

Accéder aux valeurs des paramètres de requête

Maintenant que nous savons comment faire adopter des paramètres de requête facultatifs à un itinéraire, voyons comment accéder à ces valeurs sur les itinéraires résultants. La classe ActivatedRoute dispose d’une propriété queryParams qui renvoie un compte-rendu des paramètres de requêtes disponibles dans l’URL en cours.

Compte tenu de l’URL de l’itinéraire suivante :

http://localhost:4200/products?order=popular

Nous pouvons accéder au paramètre de requête order de cette manière :

// ...
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({ ... })
export class ProductComponent implements OnInit {
  order: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params); // { order: "popular" }

        this.order = params.order;
        console.log(this.order); // popular
      }
    );
  }
}

Dans le journal de la console, nous verrions l’objet params :

Output
{ order: "popular" }

Ainsi que la valeur params.order :

Output
popular

Il y a aussi queryParamMap, qui renvoie un compte-rendu avec un objet paramMap.

Compte tenu de l’URL de l’itinéraire suivante :

http://localhost:4200/products?order=popular&filter=new

Nous pouvons accéder au paramètre de requête de cette manière :

this.route.queryParamMap
  .subscribe((params) => {
    this.orderObj = { ...params.keys, ...params };
  }
);

Ici, nous avons utilisé l’opérateur de diffusion d’objet, et voici la forme résultante des données dans orderObj :

{
  "0": "order",
  "1": "filter",
  "params": {
    "order": "popular",
    "filter": "new"
  }
}

Vous savez désormais comment queryParams et queryParamMap peuvent être utilisés pour accéder à des valeurs sur les itinéraires ainsi obtenus.

Conclusion

Dans cet article, vous avez utilisé différents exemples pour définir et obtenir des paramètres de requête dans Angular. Vous avez été initié à queryParams et queryParamsHandling avec Router.navigate et RouterLink. Vous avez également été initié à queryParams et queryParamMap avec ActivatedRoute.

Si vous souhaitez en savoir plus sur Angular, consultez notre page thématique Angular pour des exercices et des projets de programmation.