Angular4：HttpClient 和 HttpParams：将对象作为值传递给 httpParams.set()答案

【问题标题】：Angular4: HttpClient and HttpParams: passing an object as a value in httpParams.set()Angular4：HttpClient 和 HttpParams：将对象作为值传递给 httpParams.set()
【发布时间】：2017-08-25 22:34:49
【问题描述】：

我遇到了更复杂的键值对的问题...如果我想将值设置为对象怎么办？

我遇到了这个问题：

const includeStr = JSON.stringify({include: 'match-timeline-events'});
const params: HttpParams = new HttpParams().set('filter', includeStr);

当我使用它时：

this.http.get(environment.apiPath + '/clientMatches/' + id, {params})

我进入标题然后设置这个

(urlencoded): filter:%7B%22include%22:%22match-timeline-events%22%7D

但由于某种原因， : 没有被编码，字符串应该是

(urlencoded): filter:%7B%22include%22%3A%22match-timeline-events%22%7D

任何想法如何解决这个问题？

【问题讨论】：

从上面的代码中并不清楚param key-value是如何用:而不是=分隔的。可能问题出在其他地方。
你是什么意思 : 而不是 =？ ...我说这是通过请求中发送的标头来实现的...生成的 url 是：http://localhost:3000/api/...clientMatches/5987633c508eb519385779c8?filter=%7B%22include%22:%22match-timeline-events%22%7D
我被另一个冒号弄糊涂了，filter:%7B%2...。这些参数是否会在服务器端引起麻烦？我猜他们不编码 : 和 other listed chars 因为它们对 url 是安全的，并且在编码时只会浪费带宽。
它确实给我带来了问题，是的：/ loopBack 没有将其识别为有效的过滤器参数
这很奇怪，冒号不应该有区别，这应该可以按预期工作，JSON.parse(decodeURIComponent('%7B%22include%22:%22match-timeline-events%22%7D'))。我注意到您发布的网址包含不可见的空格 (en.wikipedia.org/wiki/Zero-width_space) 。你有想法从哪里来吗？这会是一个真正的问题吗？

标签： angular httpclient

【解决方案1】：

这可能是一个应该报告的错误。无论如何，您都可以使用 HttpParams custom encoder 来解决它，它可以扩展默认的 HttpUrlEncodingCodec。

可以看出，HttpUrlEncodingCodec 使用 custom function 和 doesn't encode a colon on purpose。

【讨论】：