角度4 HttpClient查询参数

Question

我一直在寻找一种方法，通过新的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属性，所以我想知道在哪里传递查询参数？

Answer 1

你可以这样通过

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

Answer 2

您可以（在版本5中）使用FromObject和FromString构造函数参数创建HttpParamater时，使事情更容易一点

    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

Answer 3

我最终通过get（）函数上的IntelliSense找到了它。所以，我会把它贴在这里，给任何想找类似信息的人。

无论如何，语法几乎相同，但略有不同。需要将参数初始化为HttpParams（），而不是使用URLSearchParams（），并且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或下划线或普通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 })