Angular 4.3 中的 Http 参数答案

【问题标题】：Http params in Angular 4.3Angular 4.3 中的 Http 参数
【发布时间】：2018-01-04 13:48:05
【问题描述】：

我正在尝试使用 Angular 4.3 附带的新 http 客户端。我已经检查了文档并使用了 HttpParams 类，但它似乎不起作用或者我做错了什么。这是我所拥有的：

delete(personId: string) {
    const params = new HttpParams();
    params.set('personId', personId);
    return this.http.delete(`${this.baseUrl}`, {
      params
    });
  }

但是在发出请求时，我的网址中没有查询参数任何帮助将不胜感激

【问题讨论】：

标签： angular http typescript

【解决方案1】：

参数现在是不可变的~~所以你必须在启动新的 HttpParams 时设置它们~~所以每个 set() 返回一个新实例并应用更改。试试

const params = new HttpParams()
    .set('personId', personId);

这里是涵盖 4.3 的标头和 url 参数的文档 - https://angular.io/guide/http#headers

编辑：我想更新我的答案并声明您在启动 HttpParams 类时不必设置参数。例如，如果您需要在 for 循环内或 HttpParams 初始化之外设置参数，您可以通过

const params = new HttpParams()
    .set('personId', personId);

params = params.set('personName', personName);

如文档所述：

HttpHeaders 类是不可变的，因此每个 set() 都会返回一个新实例并应用更改。

【讨论】：

【解决方案2】：

HttpParams is immutable.

set() 创建并返回一个新的 HttpParams 实例，而不改变调用 set() 的实例。

所以代码应该是

const params = new HttpParams().set('personId', personId);

这是我在使用这个新的 HttpParams 时遇到的另一件事，有时我们要传递 n 个参数，那时有 一些转换参数对象的函数很有用（我们之前使用过Angular 4.3) 到 HttpParams。

我建议在您常用的服务中制作 toHttpParams 函数。所以你可以调用函数将对象转换为HttpParams。

/**
 * Convert Object to HttpParams
 * @param {Object} obj
 * @returns {HttpParams}
 */
toHttpParams(obj: Object): HttpParams {
    return Object.getOwnPropertyNames(obj)
        .reduce((p, key) => p.set(key, obj[key]), new HttpParams());
}

更新：

从 5.0.0-beta.6 (2017-09-03) 开始，他们添加了新功能 (accept object map for HttpClient headers & params)

可以直接传递对象而不是HttpParams。

这是另一个原因，如果您使用了上面提到的 toHttpParams 之类的常用功能，您可以轻松删除它或根据需要进行更改。

【讨论】：