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

这将导致 API 调用以下 URL：

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

但是，新的HttpClientget()方法没有search属性，所以我想知道在哪里传递查询参数？

Answer 1

我最终通过 get() 函数上的 IntelliSense 找到了它。因此，我将 post 提供给正在寻找类似信息的任何人。

无论如何，语法几乎相同，但略有不同。而不是使用 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 的调用中有条件地 add/remove 参数非常简单。 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 })

Answer 2

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。

Answer 3

您可以（在版本 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

Answer 4

search 属性 URLSearchParams 类型 RequestOptions class 在 angular 4 中已弃用。相反，您应该使用类型为 URLSearchParams 的 params 属性。

Answer 5

更简洁的解决方案：

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

Answer 6

你可以这样传

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

Answer 7

如果您有一个对象可以转换为 {key: 'stringValue'} 对，您可以使用此快捷方式转换它：

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

我就是喜欢传播语法！

Answer 8

和Angular7个，我通过使用以下命令而不使用 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();
  }
}

Angular 4个HttpClient查询参数

Angular 4 HttpClient Query Parameters

http

typescript

lodash

angular

angular-httpclient