Angular 11 HTTPClient 不会在查询参数中编码“/”答案

【问题标题】：Angular 11 HTTPClient will not encode "/" in query paramsAngular 11 HTTPClient 不会在查询参数中编码“/”
【发布时间】：2021-07-08 21:34:41
【问题描述】：

所以出于某种我不知道的原因，angular 似乎无法将 / 编码为 %2F。

我试过 const encoder = new HttpUrlEncodingCodec。并对值进行编码。我也尝试过 javascripts encodeURIComponent，它在记录值时确实有效，但在网络选项卡中它被双重编码为 %252F。

我在网上找不到任何关于如何做到这一点，或者为什么它不能自己运行的信息。

我们将不胜感激。

public requestJourneyData$(payload): Observable<any> {
 const { country, selectedGoals, endPoint } = payload;
 const encoder = new HttpUrlEncodingCodec();
 encoder.encodeKey(selectedGoals); // Does nothing
 encoder.encodeValue(selectedGoals); // Does nothing
 new HttpUrlEncodingCodec().encodeValue(selectedGoals); // does nothing
 encodeURIComponent(selectedGoals); // Does work, but not when viewed in network requests in chrome dev tools.

 return this.http.get(`${endPoint}?`, {
   params: { selectedGoals, country },
 });}

【问题讨论】：

为什么需要这个？ / 在查询字符串中没有特殊含义，所以不需要转义。
从前端的角度我不太确定。 shi的后端，我的意思是后端工程师说他们不能接受/。但是斜线是用户选择的目标的一部分。他说他们需要它作为 %2F。
然后考虑只做一个字符串替换。一个好的后端不应该关心，正常的 url 编码函数不会对需要它的字符进行编码。
出于某种原因，当我手动输入 %2F 时，当我查看网络选项卡时，它仍然会对其进行双重编码。有什么方法可以覆盖角度编码模式吗？
是的，不要使用参数，而是手动构建 URL（包括? 之后的所有内容）

标签： angular typescript httpclient urlencode angular11

【解决方案1】：

感谢上面的 cmets，Angular 似乎不允许您进行手动编码。 HttpClient 为您完成这一切。绕过此问题的唯一当前方法 ref @evert：不要使用参数，而只是手动构造 URL（包括之后的所有内容？）。

感谢埃弗特！

【讨论】：

【解决方案2】：

如果您的 url 参数来自输入字段，则可以

屏蔽它们，或
手动删除它们

掩蔽：

使用 ngx-mask 包。

    public customPatterns = { M: { pattern: new RegExp("[^\/]")}};

    <input
        mask="M*"
        [patterns]="customPatterns"
        [dropSpecialCharacters]="false"
        type="text"
    />

【讨论】：