Tutorial

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

Published on November 16, 2020
Default avatar

By Alligator.io

Français
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

Remarque : la préservation des paramètres de requête se faisait auparavant avec preserveQueryParams réglé sur true, mais cela est maintenant déprécié dans Angular 4+ en faveur de queryParamsHandling.

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.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel