在 Angular 中路由时使用 `queryParams` 时，URL 中的 `%` 被替换为 `%25`答案

【问题标题】：In URL `%` is replaced by `%25` when using `queryParams` while routing in Angular在 Angular 中路由时使用 `queryParams` 时，URL 中的 `%` 被替换为 `%25`
【发布时间】：2018-11-05 12:56:55
【问题描述】：

我想在 Angular 中路由时使用 queryParams 导航到一个 URL。

<a routerLink='/master' [queryParams]="{query:'%US',mode:'text'}"><li (click)="search()">Search</li></a>

我要导航的网址是：

http://localhost:4200/master?query=%US&mode=text

但是当我点击搜索时，它会将我导航到：

http://localhost:4200/master?query=%25US&mode=text

我不知道为什么25 会附加在% 符号之后。谁能告诉我一种更清洁的正确导航方式。

【问题讨论】：

它工作正常。 % 是 URL 编码的转义字符，所以文字 % 字符必须被转义，否则你的 URL 无效。如果您对这个概念不熟悉，请阅读here。
我尝试使用\%，但它也不起作用
没有。它正在工作。 %25 是正确的。 '\' 不是 URL 中的转义字符。
请阅读我所说的，然后点击该链接。 您已经在正确使用%。
如果你想改变 url 结构，你可以尝试 angular url serializer stackoverflow.com/a/49618237/4399281 你的情况可能是：function cleanUrl(url) { return url.replace("%25",'%' ) }

标签： javascript angular typescript routing angular4-router

【解决方案1】：

在 URL 中，百分号具有特殊含义，用于对特殊字符进行编码。例如，= 被编码为 %3D。

某些特殊字符不允许在 url 中使用。如果你想在 url 中使用它们，你必须使用 encodeURIComponent javascript函数对它们进行编码。 %25 实际上是 % 字符的编码版本。这里浏览器正在对它们自己进行编码。

当尝试从 url 获取 queryParams 时，您可以使用 decodeURIComponent 对其进行解码。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent

【讨论】：