wake-up-neo.com

So übergeben Sie URLSearchParams in der HttpClient-Methode "get" - Angular 5

Ich habe Angular 4.2 mit dem Http - Dienst verwendet und die get-Methode wie folgt verwendet, wobei params ein URLSearchParams-Objekt ist:

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

Ich möchte nach Angular 5 . Http migrieren. Http ist jetzt ein HttpClient - Objekt, wie vom Winkelteam empfohlen Ich habe einen Fehler mit der Suchtaste erhalten.

Wissen Sie, wie Sie in meinem Fall HTTP zum HttpClient-Dienst migrieren?

Vielen Dank.

angularhttphttpclientangular5
16
mike

Seit Angular 4.3 können Sie HttpClient folgendermaßen verwenden:

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 und HttpHeaders sind unveränderliche Klassen. Nach jedem Aufruf von set- oder append-Methoden geben sie eine neue Instanz zurück. Deshalb sollten Sie Folgendes tun: params = params.append(...)

41
Bougarfaoui El houcine

Winkel 4-Wege:

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

Winkel 5 weg:

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

Mehrere Params:

// 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

Folgende Änderungen werden Sie machen:

  • Ersetzen Sie den Import von älterem HTTP durch:

    {HttpClient} aus "@ angle/common/http" importieren;

  • Erstellen Sie das HttpClient-Objekt wie folgt:

    konstruktor ( geschützter httpClient: HttpClient, ) {}

    Nun gibt es Möglichkeiten, Suchparameter zu erreichen, und zwar wie folgt:

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

oder:

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

Ich hatte eine Situation, als es mehrere Parameter gab, die an die API übergeben werden mussten. Das einzige, was für mich funktioniert hat, ist, wenn die set () - Methode in derselben Zeile während der Initialisierung von HttpParams-Objekten verkettet wird:

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