Компонент вне роутера, не обновляется ли его window.location.href после перенаправления роутера через сторож? - PullRequest
Новая
       33

Компонент вне роутера, не обновляется ли его window.location.href после перенаправления роутера через сторож?

2 голосов
/ 21 апреля 2020

У меня есть этот компонент навигации, который находится за пределами маршрутизатора, он использует многократно используемый значок, который использует абсолютный URL-адрес для указания на значки SVG, который извлекается через метод получения внутри компонента: 

public get absUrl(): string {
    return window.location.href.split('#')[0];
  }

К сожалению, после перенаправления представление не обновляется с новым abs url, когда вызывается из охраны.

Я сделал обходной путь с setTimeout, но он супер хакерский - просто чтобы продемонстрировать, что есть некоторая задержка в цепочке, которая вызывает проблему, поскольку в конечном итоге значение для window.location.href является правильным.

Вот обходной путь: 

public absUrl = window.location.href.split('#')[0];

  ngAfterViewInit() {
    setTimeout(() => {
      this.absUrl = window.location.href.split('#')[0];
      this.ref.detectChanges();
    }, 200);
  }
  • Только при загрузке всего приложения по защищенному маршруту попытка последующего доступа к защищенному маршруту после загрузки приложения будет работать нормально.
  • Это происходит при загрузке всего приложения по несуществующему маршруту и ​​при перенаправлении на / 404
  • Если установить тайм-аут 0 - 100 мс, он не будет обновляться во времени
  • Компонент загружается через роутер-розетка работает, abs url внутри иконок обновляется точно.

У кого-нибудь есть идеи как правильно реализовать этот? Я догадываюсь, что это связано с тем, как приложение загружается в первый раз, если вы пытаетесь загрузить защищенный маршрут.

1 Ответ

2 голосов
/ 21 апреля 2020

Полагаю, вы можете сделать что-то подобное, используя сервис Location: 

public absUrl = window.location.href.split('#')[0];

constructor(location: Location, ref: ChangeDetectorRef) {
  location.onUrlChange((s) => {
    this.absUrl = window.location.href.split('#')[0]);
    ref.detectChanges();
  });
}
...