Как остановить событие подписанного маршрутизатора в Angular 8

#angular #angular8 #router

#angular #angular8 #маршрутизатор

Вопрос:

Навигация в приложении не может быть остановлена без использования Guard???

Ниже приведен мой пример кода

  constructor(
      private XXXXXService: XXXXXService
  ) {
    this.XXXX.XX_amount = 0;

    this.routerSubscription = this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
          //do something on start activity
          console.log("event instanceof NavigationStart",this.router.events, event)
          if(this.invoiceForm.dirty){ 
            if(window.confirm("WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes."))
            { 
            const currentRoute = this.router.routerState;
            console.log("pressed CANCEL NOT OK", this.router.routerState,currentRoute.snapshot.url);
            this.router.navigateByUrl(currentRoute.snapshot.url, { skipLocationChange: false });
          }
          else
          {
            const currentRoute = this.router.routerState;
            // This is some CODE Im Trying,please ignore this
               //event.preventDefault()
            console.log("pressed CANCEL NOT OK", this.router.routerState,currentRoute.snapshot.url);
            this.router.navigateByUrl(currentRoute.snapshot.url, { skipLocationChange: true });
          }
        }
          
      if (event instanceof NavigationError) {
          // Handle error
          console.error(event.error);
      }

      if (event instanceof NavigationEnd) {
          //do something on end activity
          console.log("event instanceof NavigationEnd")
      }
    }
    });
  }

@HostListener('window:beforeunload', ['$event'])
unloadNotification($event: any) {
    if (this.hasUnsavedData()) {
        $event.returnValue =true;
    }
}
hasUnsavedData()
{
  return !this.XXXXForm.dirty
}
 

ngOnInit() {
console.log(this.location.getState());

Независимо от результата подтверждения Windowown, страница по-прежнему переходит на другую страницу. Навигация в приложении не может быть остановлена.

Комментарии:

1. Покажите окружающий код. Кажется, вы запускаете подтверждение, когда навигация уже запущена..

2. @MikeOne Окружающий код, я использовал приведенный ниже код внутри моего конструктора и ** Этот код для предотвращения закрытия и обновления проблемы. ** Чтобы предотвратить закрытие вкладки / браузера и перезагрузку, подтвердите @HostListener(‘window:beforeunload’, [‘$event’]) unloadNotification($event: any) { if (this.hasUnsavedData()) { $event.returnValue =true; } } hasUnsavedData() { return !this.SomeFORM.dirty } и мой исходный код, который я отредактировал в том же вопросе.

3. @MikeOne Да, я запускаю подтверждение только во время навигации, потому что мое требование заключается только в том, чтобы при переходе проверить, не загрязнена ли форма, и, если разрешить переход, заполнить форму, а затем перейти

Ответ №1:

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

Пытаюсь сделать что-то вроде этого.

 onBack(): void {
 if (this.checkForm()) {
    // navigate elsewhere
 }
}

checkForm(): boolean {
   if (this.customerForm.touched) {
       return confirm(`Navigate away and lose all your changes?`);
   }
   return true;
}
 

Комментарии:

1. Огромное спасибо за быстрый ответ, но действие по изменению маршрута уже подвергается событию router.event.subscribe() и независимо от подтверждения ответа msg перенаправляет на новую страницу.

2. О, я понимаю. Это было неясно из вашего первоначального описания. Возможно, вы могли бы объяснить, чего вы пытаетесь достичь? Вы не можете использовать защиту маршрута? Я что-то упустил?