web-dev-qa-db-ja.com

Angular 4 HttpClientクエリパラメータ

私は新しいHttpClientModuleのHttpClientを使ってクエリパラメータをAPI呼び出しに渡す方法を探していて、まだ解決策を見つけていません。古いHttpモジュールでは、このようなものを書くでしょう。

getNamespaceLogs(logNamespace) {

    // Setup log namespace query parameter
    let params = new URLSearchParams();
    params.set('logNamespace', logNamespace);

    this._Http.get(`${API_URL}/api/v1/data/logs`, { search: params })
}

これにより、次のURLへのAPI呼び出しが発生します。

localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace

しかし、新しいHttpClientget()メソッドにはsearchプロパティがないので、クエリパラメータをどこに渡すか疑問に思いますか？

angularhttptypescripthttpclientlodash
104
joshrathke

私はget()関数のIntelliSenseを通してそれを見つけることになった。だから、私はここでそれを似たような情報を探している人のために投稿するつもりです。

とにかく、構文はほぼ同じですが、わずかに異なります。 URLSearchParams()を使用する代わりに、パラメータをHttpParams()として初期化する必要があり、get()関数内のプロパティはparamsではなくsearchと呼ばれるようになりました。

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

getLogs(logNamespace): Observable<any> {

    // Setup log namespace query parameter
    let params = new HttpParams().set('logNamespace', logNamespace);

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })
}

私は実際にはもう少しパラメータにとらわれないのでこの構文を好む。コードをもう少し短くするために、コードをリファクタリングしました。

getLogs(logNamespace): Observable<any> {

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, {
        params: new HttpParams().set('logNamespace', logNamespace)
    })
}

複数のパラメータ

これまでに見つけた最良の方法は、定義したいすべてのパラメーターを定義したParamsオブジェクトを定義することです。以下のコメントで@estusが指摘したように、 This Question には、複数のパラメータをどのように割り当てるかに関して多くの素晴らしい答えがあります。

getLogs(parameters) {

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

    // Begin assigning parameters
    params = params.append('firstParameter', parameters.valueOne);
    params = params.append('secondParameter', parameters.valueTwo);

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

条件付き論理を持つ複数のパラメータ

私がよく複数のパラメータを使用して行う別のことは、すべての呼び出しでそれらの存在を必要とせずに複数のパラメータを使用できるようにすることです。 Lodashを使用すると、条件付きでAPIの呼び出しにパラメータを追加/削除するのはとても簡単です。 LodashやUnderscores、あるいはVanilla JSで使われている関数そのものはあなたのアプリケーションによって異なるかもしれませんが、プロパティ定義のチェックはかなりうまくいくことがわかりました。以下の関数は、関数に渡されるparameters変数内に対応するプロパティを持つパラメータのみを渡します。

getLogs(parameters) {

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

    // Begin assigning parameters
    if (!_.isUndefined(parameters)) {
        params = _.isUndefined(parameters.valueOne) ? params : params.append('firstParameter', parameters.valueOne);
        params = _.isUndefined(parameters.valueTwo) ? params : params.append('secondParameter', parameters.valueTwo);
    }

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })
162
joshrathke

HttpParamatersを作成するときに、（= 5以降） fromObject および fromString コンストラクタパラメータを使用して、作業を少し簡単にすることができます

    const params = new HttpParams({
      fromObject: {
        param1: 'value1',
        param2: 'value2',
      }
    });

    // http://localhost:3000/test?param1=value1&param2=value2

または

    const params = new HttpParams({
      fromString: `param1=${var1}&param2=${var2}`
    });

    //http://localhost:3000/test?paramvalue1=1&param2=value2
72
JayChase

より簡潔な解決策：

this._Http.get(`${API_URL}/api/v1/data/logs`, { 
    params: {
      logNamespace: logNamespace
    } 
 })
9
Darwayne

あなたはこのようにそれを渡すことができます

let param: any = {'userId': 2};
this.http.get(`${ApiUrl}`, {params: param})
8
Pradeep B P

Angular 7では、HttpParamsを使わずに次のようにして動作させることができました。

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

export class ApiClass {

  constructor(private httpClient: HttpClient) {
    // use it like this in other services / components etc.
    this.getDataFromServer().
      then(res => {
        console.log('res: ', res);
      });
  }

  getDataFromServer() {
    const params = {
      param1: value1,
      param2: value2
    }
    const url = 'https://api.example.com/list'

    // { params: params } is the same as { params } 
    // look for es6 object literal to read more
    return this.httpClient.get(url, { params }).toPromise();
  }
}
3
Jun711

joshrathkeは正しいです。

Angular.io docs には、{@ angular/httpからのURLSearchParamsは廃止予定ですと書かれています。代わりに@ angular/common/httpからのHttpParamsを使用してください。このコードは非常によく似ており、joshrathkeが書いたものと同じです。のようなオブジェクトに保存されている複数のパラメータの場合

{
  firstParam: value1,
  secondParam, value2
}

あなたもできる

for(let property in objectStoresParams) {
  if(objectStoresParams.hasOwnProperty(property) {
    params = params.append(property, objectStoresParams[property]);
  }
}

継承したプロパティが必要な場合は、それに応じてhasOwnPropertyを削除してください。

2
Sven

RequestOptionsクラスのURLSearchParams型のsearchプロパティは、Angular 4では推奨されません。代わりに、URLSearchParams型のparamsプロパティを使用してください。

2
sanket patel

{key: 'stringValue'}ペアに変換できるオブジェクトがある場合は、このショートカットを使用してそれを変換できます。

this._Http.get(myUrlString, {params: {...myParamsObject}});

私は拡散構文が大好きです！

1
Jeremy Moritz

Angular 7のURLで複数のパラメーターを渡す

  component.ts File --
  --------------------------------------------------------------------------
  export class UnsubscribeComponent implements OnInit {
  email: string;
  token: string;

  constructor(private httpSvc: HttpService) {}


  ngOnInit() {
  this.httpSvc.get('pin/unsubscribe'+'? 
  email='+this.email+'&tn='+this.token).subscribe(res => {
  if (res.status === this.appConstants.ResponseCodes.success) {      
          //Do what you want
    } else {
      //Do what you want
     }
   });
 }
0
Rahul Seth