#angular #google-chrome #browser #router #angular9
#angular #google-chrome #браузер #маршрутизатор #angular9
Вопрос:
Я работаю в проекте 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
Комментарии:
1. Выглядит как интересная проблема. Не могли бы вы, пожалуйста, воспроизвести это на stackblitz.com ?
2. Я настроил его, однако здесь происходит что-то, чего нет в моем реальном приложении, здесь маршрут фактически меняется (но вы не перемещаетесь). В моем приложении маршрут возвращается к тому, что было, если вы отмените запрос. (Кстати, я не добавлял здесь route guard, только прослушиватель, с чем у меня проблема.) Я надеюсь, что это поможет найти решение: stackblitz.com/edit/routing-angular-lx5wwh ?
3. Если кто-нибудь что-нибудь знает об этом, мне действительно пригодилась бы помощь!