typescript Angular 4.3 中的 Http 参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45374368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Http params in Angular 4.3
提问by ocespedes
I'm trying to use the new http client that came out with Angular 4.3. I've checked the docs and the use the HttpParamsclass but it seems not to be working or I'm doing something wrong. Here is what I have:
我正在尝试使用 Angular 4.3 推出的新 http 客户端。我已经检查了文档并使用了HttpParams课程，但它似乎不起作用或者我做错了什么。这是我所拥有的：
delete(personId: string) {
const params = new HttpParams();
params.set('personId', personId);
return this.http.delete(`${this.baseUrl}`, {
params
});
}
But when making the request there are no query params in my url Any help would be appreciated
但是在提出请求时，我的 url 中没有查询参数任何帮助将不胜感激
回答by LLai
The params are now immutable so you have to set them when you initiate the new HttpParamsso every set() returns a new instance and applies the changes. Try
params 现在是不可变的，因此您必须在启动新的 HttpParams 时设置它们，以便每个 set() 返回一个新实例并应用更改。尝试
const params = new HttpParams()
.set('personId', personId);
Here are the docs that cover headers and url parameters for 4.3 - https://angular.io/guide/http#headers
以下是涵盖 4.3 的标题和 url 参数的文档 - https://angular.io/guide/http#headers
Edit:I wanted to update my answer and state that you don't have to necessarily set the parameters when you initiate the HttpParams class. For example if you need to set parameters within a for loop or outside of the HttpParams initialization you can do so by
编辑：我想更新我的答案并声明您不必在启动 HttpParams 类时设置参数。例如，如果您需要在 for 循环内或 HttpParams 初始化之外设置参数，您可以通过
const params = new HttpParams()
.set('personId', personId);
params = params.set('personName', personName);
As stated by the docs:
正如文档所述：
The HttpHeaders class is immutable, so every set() returns a new instance and applies the changes.
HttpHeaders 类是不可变的，因此每个 set() 都会返回一个新实例并应用更改。
回答by Lahar Shah
set()creates and returns a new HttpParams instance, without mutating the instance on whichset()is called.
set()创建并返回一个新的 HttpParams 实例，而不改变set()被调用的实例。
So the code should be
所以代码应该是
const params = new HttpParams().set('personId', personId);
Here is one further thing I struggled with when using this new HttpParams, sometimes we have n number of params to pass, at that time it is useful to have some function that converts parameter object(that we were using before Angular 4.3) to the HttpParams.
这是我在使用这个新的 HttpParams 时遇到的另一件事，有时我们有 n 个参数要传递，当时有一些函数可以将参数对象（我们在 Angular 4.3 之前使用的）转换为 HttpParams .
I suggest making toHttpParamsfunction in your commonly used service. So you can call the function to convert the object to the 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());
}
Update:
更新：
Since 5.0.0-beta.6 (2017-09-03) they added new feature (accept object map for HttpClient headers & params)
Going forward the object can be passed directly instead of HttpParams.
自 5.0.0-beta.6 (2017-09-03) 起，他们添加了新功能（接受 HttpClient 标头和参数的对象映射）
以后可以直接传递对象而不是 HttpParams。
This is the other reason if you have used one common function like toHttpParamsmentioned above, you can easily remove it or do changes if required.
这是另一个原因，如果您使用了像上面提到的toHttpParams这样的常用函数，您可以轻松地将其删除或根据需要进行更改。
