Запуск функции Angular несколько раз, если пользователь нажал кнопку back в браузере

Question

С чем может быть связано, что при нажатии кнопки "Обратно" в браузере, при отлавливании этого события я замечаю, что функции выполнеются больше раз, ровно на столько, сколько раз была нажата кнопка обратно?
Вот пример. Я не могу разобраться. Я на ангуляре пишу.

 @HostListener('window:popstate', ['$event'])
  onPopState(event) {
    this.myfunc();  //Функция,скажем,просто выводит текст в консоль, который потом выводится несколько раз
  }

Если так, то то же самое

ngOnInit(){
    this.my_func();

    window.onpopstate = (event)=> {
      this.my_func(); //Сейчас эта функция запускается не один, а много раз
    };
  }

Answer 1

Явно происходит новая подписка при существующей старой. При смене компоненты хук OnInit будет вызываться снова. Вариантов пару: одна глобальная подписка которая будет фильтрить по всех ивентах роутера или же юзнуть хук OnDestroy. В любом случае советую воспользоваться ActivatedRoute или Location. Если Вы решите выбрать вариант с OnDestroy, достаточно будет подписаться на ивенты Location, например, и кенселить его на дестрое компоненты:

private locationSub$: SubscriptionLike; // специфика Location

constructor(private location: Location) { }

ngOnInit() {
    this.locationSub$ = this.location
        .pipe(takeUntil(this.destroy$))
        .subscribe(params => { 
              // logic
         })
}

ngOnDestroy() {
    this.locationSub$.unsubscribe();
}

Прошу заметить, что многое зависит от действия которое должно быть выполнено. В даном случае отлавливается только последний ивент раутинга. Если вы хотите прерывать возвращение через не сохраненную информацию введенную ранее, советую использовать гард CanDeactivate, который можно расширить для деактивейта определенной компоненты. В сети есть решения.

БЛОГ НА HUSL

Запуск функции Angular несколько раз, если пользователь нажал кнопку back в браузере

Ответы (1 шт):