angular - 如何避免在重新加载时使用参数解码 url

Question

如果电子邮件中的链接包含带查询参数的绝对 URL 路径，Angular 会对此进行解码。

菜单导航以这种方式工作 <a [routerLink]="node.application.path" [queryParams]="{ reiter: node.application.argument}" (click)="onClickLink(node)">{{ node.name }}</a>

结果是一个像这个例子的链接: http://localhost:4200/#/service/wissen/content/74433?reiter=74427

在重新加载页面时，这将编码为: http://localhost:4200/#/service/wissen/content/74433%3Freiter%3D74427

电子邮件中的链接也是如此

我哪里错了？

Answer 1

我相信这是您的路由器模块使用 HashLocationStrategy 的结果，这可以从您的 URL 中 http://localhost:4200/ 之后的 # 看出。

hash fragment的 URL 被视为一个字符串，因此被编码。它不像 Angular 那样对待它(包含路径和后续查询参数)。

为了解决这个问题，您可以简单地更改路由器模块的定位策略:

RouterModule.forRoot(
    appRoutes,
    { useHash: false } // <-- will not use HashLocationStrategy
)

如果你不能改变它(你的配置/部署不允许它)，那么你就会被 Angular 从它的路由器给你的表现困住。否则，您可以简单地绑定(bind)到 href 属性并在您的组件逻辑中进行 URL 构建。这样，无论您的 URL 的路由器构建结果如何，您始终可以使用 decodeURI()或 decodeURIComponent()显示原始 URL。