Блог

Я работаю в проекте Angular 9. У меня есть форма, и я хочу предупредить пользователей, если они внесли несохраненные изменения в форму и пытались перейти. Для навигации по маршрутизатору я использую базовую защиту маршрута CanDeactive, но мне нужно использовать HostListener для предупреждения пользователей, когда они пытаются перемещаться за пределами моего маршрутизатора или с помощью действий браузера (с помощью кнопки назад / вперед, обновления или ввода нового URL-адреса во ввод URL-адреса браузера). Я использовал это:

 @HostListener("window:beforeunload", ["$event"])
  unloadNotification($event: any) {
    if (this.myForm?.dirty) {
      $event.returnValue = true;
    }
  }
  

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

Однако кнопка переадресации становится включенной, и теперь отображается история состояния переадресации истории. На самом деле это даже, кажется, удаляет последнее состояние истории, даже когда навигация отменена.

Вот еще подробности: если я был на следующих маршрутах (по порядку): /tab1 , /tab2 , /tab3 , /tab4 , /myFormPage

и затем я вношу изменения в форму (на /myFormPage маршруте) и пытаюсь перейти, я получаю приглашение. Я вижу в URL, по которому будет предпринята попытка навигации /tab4 . Если я отменяю запрос, навигация по мне прекращается, но моя кнопка переадресации становится включенной и за ней стоит история. Если я попытаюсь перейти снова, URL-адрес для предпринятой навигации будет to /tab3 , хотя ожидалось, что это будет to ./tab4 , поскольку он был отменен ранее.

В принципе, я думаю, что история все еще изменяется, даже если HostListener предотвращает навигацию (если пользователь отменяет запрос). Как я могу это решить? Есть ли способ сообщить браузеру, что я не хочу, чтобы моя история изменялась, или я должен сделать это вручную.

Это происходит в Chrome, Firefox и safari.

Я создал stackblitz, где вы можете просмотреть эту проблему:https://stackblitz.com/edit/routing-angular-lx5wwh