Angular 4 HttpClientクエリパラメータ

私は新しいとのAPIコールにクエリパラメータを渡す方法を探してきたHttpClientModuleのHttpClientと解決策を見つけるためには至っていません。古い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

しかし、新しいHttpClient get()メソッドにはsearchプロパティがないので、クエリパラメーターで渡す場所を知りたいのですが？

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が指摘したように、この質問には、複数のパラメーターを割り当てる方法に関して多くの素晴らしい答えがあります。

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 })

条件付きロジックを持つ複数のパラメーター

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

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 })

（バージョン5以降では）HttpParamaterを作成するときに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

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

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

より簡潔なソリューション：

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

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();
  }
}

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

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

スプレッド構文が大好きです！

joshrathkeは正しいです。

angular.ioのドキュメントでは、@ 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を削除します。

検索型のプロパティURLSearchParamsでRequestOptionsのクラスは、代わりに、角度4で廃止され、あなたが使用する必要があるのparams型のプロパティURLSearchParamsを。