[解決済み] Angular 4 HttpClient クエリパラメータ

質問

APIコールにクエリパラメータを渡す方法を探していたのですが、新しい HttpClientModule 's 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() 関数を使用します。そこで、同じような情報を探している人のために、ここに掲載します。

とにかく、構文はほぼ同じですが、少し違います。その代わりに 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 })

条件付きロジックで複数のパラメータを指定する

もうひとつ、複数のパラメータを使用する際によく行うのが、すべての呼び出しでパラメータの存在を必要とせずに、複数のパラメータを使用できるようにすることです。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 })