web-dev-qa-db-fra.com

Comment passer URLSearchParams dans la méthode "get" de HttpClient - Angular 5

J'ai utilisé Angular 4.2 avec le service Http et j'ai utilisé la méthode get comme celle-ci où params est un objet URLSearchParams:

this.http.get(url, {headers: this.setHeaders(), search: params})

Je souhaite migrer vers Angular 5 . Http est maintenant un objet HttpClient conforme à la recommandation de l'équipe angulaire .

Savez-vous comment migrer le service Http vers HttpClient dans mon cas?

Je vous remercie.

angularhttphttpclientangular5
16
mike

Depuis Angular 4.3, vous pouvez utiliser HttpClient comme ceci:

import { HttpClient,HttpHeaders, HttpParams } from '@angular/common/http';

   constructor(private httpClient: HttpClient) { }    

   getData(){
        let headers = new HttpHeaders();
        headers  = headers.append('header-1', 'value-1');
        headers  = headers.append('header-2', 'value-2');

       let params = new HttpParams();
       params = params.append('param-1', 'value-1');
       params = params.append('param-2', 'value-2');

       this.httpClient.get("/data", {headers , params })
   }

HttpParams et HttpHeaders sont des classes immuables. Après chaque appel des méthodes set ou append, elles renvoient une nouvelle instance. Vous devez donc procéder comme suit: params = params.append(...)

41
Bougarfaoui El houcine

Angulaire 4 Voies:

this.http.get(url, {headers: this.setHeaders(), search: params})

Angular 5 Way:

import { HttpClient, HttpParams } from '@angular/common/http';
let params = new HttpParams().set('paramName', paramValue);
this.http.get(url,  { params: params })

Paramètres multiples:

// Initialize Params Object
let Params = new HttpParams();

// Begin assigning parameters
Params = Params.append('firstParameter', firstVal);
Params = Params.append('secondParameter', secondVal);
4
Daniel Segura Pérez

Après seront les changements, vous devez faire:

  • Remplacez les anciennes importations HTTP avec:

    importer {HttpClient} depuis "@ angular/common/http";

  • Créez un objet HttpClient comme ci-dessous:

    constructeur ( protected httpClient: HttpClient, ) {}

    Maintenant, il existe des moyens pour atteindre le paramètre de recherche à savoir comme ci-dessous:

    public get (searchParam: string): Observable { renvoyer this.httpClient.get (${this.URL}/${searchParam}); }

ou:

public get(searchParam: string): Observable<object> {
let headers = new Headers({ 'Content-Type': 'application/json' });
    let myParams = HttpParams().set("id", searchParam);

    let options = new RequestOptions({ headers: headers, method: 'get', params: myParams });

return this.http.get("this.url",options)
         .map((res: Response) => res.json())
         .catch(this.handleError);
}
1
Rahul

J'ai eu une situation où il y avait plusieurs paramètres qui devaient être transmis à l'API. La seule chose qui a fonctionné pour moi est lorsque vous appelez la méthode set () sur la même ligne chaînée pendant l'initialisation de l'objet HttpParams

public get(userid: string, username: string): Observable<object> {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let myParams = HttpParams().set("id", userid).set("username", username);
    let options = new RequestOptions({ headers: headers, method: 'get', params: 
myParams });
0
Shirish Joshi