Angular 8 个 routerLinks 使用 # to %23 创建解码的 href

Question

我在应用程序中生成 routerLinks 时遇到一个问题。我从 API 检索菜单结构。在应用程序初始化时获取它，将其存储在 Observable 中，然后简单地显示它。

我显示的结构部分非常简单。

<ng-container *ngFor="let item of menuItems">
  <h5 class="dekstop-submenu-heading">{{ item.name }}</h5>
    <ul class="desktop-submenu-list" [ngClass]="{'desktop-submenu-list-wrap': item.subItems.length > 5}">
      <li *ngFor="let subItem of item.subItems" class="desktop-submenu-item">
        <a [attr.aria-label]="subItem.name" [routerLink]="subItem.url">{{ subItem.name }}</a>
      </li>
    </ul>
</ng-container>

当 url 带有指向特定页面部分的锚点时，问题就出现了，即 /some-component/description#specific。 Angular routerLink 正确生成但 href 不正确，它被解码为 /some-component/description%23specific. 我无法摆脱这种行为，我尝试使用 decodeURIComponent 对其进行解码但没有任何效果..

你知道是什么导致了这种行为吗？这么简单的事情却惹出不少麻烦..

Answer 1

您只需在单独的指令中发送 url 和 element id。

如果您可以控制 subItem.url，则只需将其重命名为 /description，将 subItem.fragment 重命名为 specific，然后像这样更改模板：

[routerLink]="subItem.url" [fragment]="subItem.fragment"

如果您无法控制 subItem.url，那么只需对 %23:

执行拆分

const [url, ...fragment] = subItem.url.split('%23');

[routerLink]="url" [fragment]="fragent.join('%23')"

Answer 2

您可以在 routerLink 指令中处理查询参数我想这会对你有所帮助

  <a [attr.aria-label]="subItem.name" [routerLink]="subItem.url" 
      queryParamsHandling="preserve">{{ subItem.name }}</a>

Angular 8 个 routerLinks 使用 # to %23 创建解码的 href

Angular 8 routerLinks create decoded href with # to %23

html

routerlink

angular