Angular 8 routerLinks создает декодированный href с # до %23

У меня есть одна проблема с созданием 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, но безрезультатно.

У вас есть идеи, что вызывает такое поведение? Такая простая вещь доставляет много хлопот..


angular html routerlink
person mmied    schedule 19.11.2019    source источник
comment
см. этот stackoverflow.com/q/45428842/5366038   -  person ysk    schedule 19.11.2019

Ответы (2)


arrow_upward
2
arrow_downward

Вам просто нужно отправить 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')"
person Cristian Traìna    schedule 19.11.2019
comment
Спасибо. Ваше предложение с разделением URL-адреса было лучшим. - person mmied; 27.11.2019
comment
@mmied Я заметил проблему, перечитав свой ответ. скоро обновлю - person Cristian Traìna; 27.11.2019

arrow_upward
0
arrow_downward

Вы можете обрабатывать параметры запроса в директиве routerLink, я думаю, это поможет вам

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