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

这将导致 API 调用以下 URL：

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

然而，新HttpClient get()方法没有search属性，所以我想知道在哪里传入查询参数？

我最终通过 IntelliSense 找到了它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 在下面的评论中指出的，有很多很好的答案这个问题 https://stackoverflow.com/questions/45459532/why-httpparams-doesnt-work-in-multiple-line-in-angular-4-3/45459672#45459672至于如何分配多个参数。

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 中使用的确切函数可能会根据您的应用程序而有所不同，但我发现检查属性定义效果非常好。下面的函数将仅传递在传递给函数的参数变量中具有相应属性的参数。

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