如何解决Angular-主机侦听器/卸载通知-即使确认被拒绝,历史记录仍会更改
我正在Angular 9项目中工作。 我有一个表单,如果用户尚未保存对表单的更改并试图进行导航,我想提醒他们。对于我的路由器导航,我使用基本的CanDeactive Route Guard,但是当用户尝试在路由器外导航或使用浏览器操作(通过使用后退/前进按钮,刷新或输入新网址)时,我需要使用HostListener来警告用户进入浏览器的url输入)。我用了这个:
@HostListener("window:beforeunload",["$event"])
unloadNotification($event: any) {
if (this.myForm?.dirty) {
$event.returnValue = true;
}
}
它似乎已经按预期运行,除了我注意到一个奇怪的小错误。 如果表单很脏,并且我尝试导航,则会提示我(如预期)。如果取消提示(取消导航),我将留在原处(似乎没有导航发生,这是预期的)。
但是,前进按钮变为启用状态,并且现在有进入前进历史记录状态的历史记录。实际上,即使取消了导航,它甚至似乎也删除了最后的历史记录状态。
这里更深入:
如果我去过以下路线(按顺序):
/tab1
,
/tab2
,
/tab3
,
/tab4
,
/myFormPage
,然后我更改表单(在/myFormPage
路线上)并尝试导航,得到提示。我在URL中看到尝试的导航将是到/tab4
。如果取消提示,则不会导航,但是前进按钮将启用,并且后面有历史记录。如果我再次尝试导航,则尝试的导航URL将是/tab3
,而由于以前已取消,因此预期它将是./tab4
。
基本上,我认为即使通过HostListener阻止导航,历史记录仍在更改(如果用户取消了提示)。 我该如何解决?有没有一种方法可以向浏览器发出信号,我不想更改历史记录,还是必须手动进行更改。
这发生在chrome,firefox和safari中。
我进行了一次堆叠闪电战,您可以在其中查看此问题:https://stackblitz.com/edit/routing-angular-lx5wwh
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。