Роутинг в приложении Angular 2+?

Question

[Sashqa]

<div *ngFor="let p of points"
    class="list-of-menu-container pointer menu-line"
    (click)="currentItem = p"
    [class.full-opacity]="p.route === currentItem?.route"
>
<div class="icon-wrap">
    <i class="fa icon gray-icon" [ngClass]="[p.icon]"></i>
</div>
<div [ngClass]="{'hidden': !(fixedMenu || hoveredMenu), 'visible': !!(fixedMenu || hoveredMenu)}" class="main-text">
    <a [routerLink]="[p.route]">{{ p.label }}</a>
</div>
<div class="subbmenu" *ngIf="p.childs?.length">
    <div class="subbmenu__wrapper" *ngFor="let item of p.childs">
    <div class="subbmenu__icon">
        <i class="fa icon gray-icon" [ngClass]="[item.icon]"></i>
    </div>
    <a [routerLink]="[p.route + '/' + item.route]">{{item.label}}</a>
    </div>
</div>
</div>

Суть проблемы в следующем:
Когда мы наводим на пункт меню, у нас появляется второе меню, там мы кликаем на ссылку и все отлично переходит
Но если мы кликнем на вторую ссылка (в этом же подменю), адрес в строке у нас заменится, но перехода не будет. Приходится кликать по родителю и оттуда на вторую ссылку

Answer 1

[Антон Швец]

Сложно так сказать, не зная что у вас в роутах и что получается в компоненте. надо тащить на stackblitz

Comments

[Sashqa]

Я так предполагаю, что у меня проблема в том, что сюда приходит

{ path: 'payments', component: PaymentsPageComponent },
{ path: 'payments/:path', component: PaymentsPageComponent },

Вот этот метод выполняется при ngOnInit

this.sub1 = this.frameService.getProductUrl().subscribe(paymentUrl => {
      let url = `${paymentUrl}/payments`;
      const path = this.route.snapshot.params.path;
      if (path) {
        url += `/${path}`;
      }
      this.paymentsFrameUrl = this.frameService.getUrlForIFrame(`${url}`);
      console.log(this.paymentsFrameUrl)
    });

Соответственно, когда мы пытаемся перейти ngOnInit не срабатывает

Как только эту строку

{ path: 'payments/:path', component: PaymentsPageComponent },

Поменял на

{ path: 'payments/bill', component: PaymentsPageComponent },

{ path: 'payments/terminal', component: PaymentsPageComponent },

ngOnInit начал отрабатывать.

[Антон Швец]

Sashqa,

this.paymentsFrameUrl$ = combineLatest([
  this.route.params.pipe(pluck('path')),
  this.frameService.getProductUrl(),
]).pipe(
  map(([path, paymentUrl]) => {
    let url = `${paymentUrl}/payments`;
     if (path) {
        url += `/${path}`;
     }
     return this.frameService.getUrlForIFrame(url);
  })
);

похоже вы из компонента PaymentsPageComponent переходите в него же, тогда ngOnInit не будет вызываться, компонент же не изменился.
Вместо снапшота надо на роут подписываться.

В роутах все нормально, только payments/:path как более специфичный маршрут надо поместить выше

[Sashqa]

Антон Швец, Спасибо.
добавил ваш код и выскакивает такая ошибка
unsafe value used in a resource URL context Как с этим бороться?

[Антон Швец]

Sashqa, не видя всех деталей сложно сказать. Пользуйтесь дебагом.
this.paymentsFrameUrl$ это обсервабл, если что.

[Sashqa]

Антон Швец, В итоге проблема в том, что не рендерится компонент. Ошибок в консоли никаких нет

<iframe *ngIf="paymentsFrameUrl" [src]="paymentsFrameUrl$" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>

[Антон Швец]

Sashqa, [src]="paymentsFrameUrl$ | async"

[Sashqa]

Антон Швец, так я тоже пробовал =(

[Sashqa]

Антон Швец, вывел просто на страницу {{paymentsFrameUrl$ | async}}
Получил

SafeValue must use [property]=binding: https://mysite...

[Антон Швец]

Sashqa, ну так придется дебажить.
подпишитесь на this.paymentsFrameUrl$ посмотрите что в нем приходит.
Без живого кода можно долго гадать.

[Sashqa]

Антон Швец, Разобрался, спасибо за потраченное время!