One place for hosting & domains

      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(["https://www.digitalocean.com/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(["https://www.digitalocean.com/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]="["https://www.digitalocean.com/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.



      Source link