Comment passer les paramètres d'une requête HttpClient avec Angular ?
Depuis sa version 4, le framework Angular dispose de la classe "HttpClient" pour exécuter des requêtes HTTP à destination de services externes. Elle est intégrée dans un nouveau module gérant les interactions, "HttClientModule" qui remplace l'ancien module "HttpModule". Le module a été entièrement réécrit et le code pour passer des paramètres lors d'une requête a lui aussi évolué.
Pour utiliser la classe "HttpClient", vous devez d'abord l'importer depuis le module "HttpClientModule". Les paramètres d'une requête HTTP sont gérés par une nouvelle classe, "HttpParams", qu'il faut également importer.
import { HttpClient, HttpParams } from '@angular/common/http';
Si vous avez un seul paramètre à transmettre, vous pouvez utiliser directement la méthode "set()" après avoir instancié l'objet de la classe "HttpParams".
let parametres = new HttpParams().set('monParametre', maValeur);
Il est également possible de passer plusieurs paramètres. Vous pouvez soit utiliser la méthode "set()", qui ajoute la valeur pour le paramètre ou le modifie s'il existe déjà, ou bien la méthode "append()", qui ajoute le paramètre et forme un tableau si on ajoute plusieurs valeurs.
let parametres = new HttpParams();
parametres = parametres.append('monPremierParametre', maPremiereValeur);
parametres = parametres.append('monDeuxièmeParametre', maDeuxièmeValeur);
Pour envoyer les paramètres avec la requête, les paramètres sont à indiquer dans le paramètre "params" de la fonction.
this._HttpClient.get(`URL de l'API`, { params: parametres })
La version 5 du framework permet d'utiliser deux paramètres dans le constructeur de l'objet de la classe "HttpParams" pour faciliter l'attribution de paramètres. Le paramètre "fromObject" transforme un objet en paramètres tandis que le paramètre "fromString" permet de transformer une chaîne contenant des paramètres dans le format d'une URL.
let parametres = new HttpParams({
fromObject: {
monPremierParametre: maPremiereValeur,
monDeuxièmeParametre: maDeuxiemeValeur
}
});
let parametres = new HttpParams({
fromString: `monPremierParametre=maPremiereValeur&monDeuxièmeParametre=maDeuxiemeValeur`
});