web-dev-qa-db-ja.com

HttpClientの「get」メソッドでURLSearchParamsを渡す方法-Angular 5

Angular 4.2をHttpサービスとともに使用し、paramsがURLSearchParamsオブジェクトであるgetメソッドを使用しました。

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

Angular 5に移行したい。 httpはangularチームが推奨するようなHttpClientオブジェクトになりました。 「検索」キーでエラーが発生しました。

私の場合、HttpをHttpClientサービスに移行する方法を知っていますか？

ありがとうございました。

angularhttphttpclientangular5
20
mike

Angular 4.3以降、次のようにHttpClientを使用できます。

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およびHttpHeadersは不変クラスであるため、setまたはappendメソッドを呼び出すたびに新しいインスタンスを返すため、これを行う必要があるのはparams = params.append(...)

49
Bougarfaoui El houcine

角度4ウェイ：

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

角度5ウェイ：

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

複数のパラメーター：

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

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

変更点は次のとおりです。必要なことは次のとおりです。

  • 古いHttpインポートを次のものに置き換えます。

    import {HttpClient} from "@ angular/common/http";

  • 以下のようにHttpClientオブジェクトを作成します。

    constructor（protected httpClient：HttpClient、）{}

    現在、検索パラメータを実現する方法は次のとおりです。

    public get（searchParam：string）：Observable {return this.httpClient.get（${this.URL}/${searchParam}）; }

または：

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

APIに渡す必要がある複数のパラメーターがある状況がありました。私のために働いた唯一のことは、HttpParamsオブジェクトの初期化中に一緒にチェーンされた同じ行でset（）メソッドを呼び出すときです：

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