Angular 离开页面警告仅开发者工具打开时生效bug如何修复

根因分析 #

你遇到的仅开启开发者工具时才触发弹窗的问题，核心原因有3个：

1. 重复绑定冲突：同时在HTML模板和组件类中对window:beforeunload事件做了两次监听，回调执行互相干扰，仅在开发者工具开启的特殊运行环境下才偶然生效。
2. 浏览器安全策略限制：现代主流浏览器均要求，必须用户和页面产生过真实交互（点击、输入、滚动等操作）后，beforeunload的拦截弹窗才会生效。打开/操作开发者工具的行为会被部分浏览器判定为页面交互，刚好满足弹窗触发条件，关闭工具后如果未主动操作页面直接刷新/关闭，自然不会触发弹窗。
3. 写法不符合最新浏览器规范：仅设置event.returnValue = false的旧写法已经不被多数新版浏览器兼容，布尔值的返回值会被直接忽略。

修复操作 #

• 首先删除HTML模板中的冗余绑定代码：<div (window:beforeunload)="onWindowClose($event)"></div>，仅保留组件类中的@HostListener全局监听即可，避免冲突。
• 调整TS中的事件回调写法，符合最新浏览器规范：

@HostListener('window:beforeunload', ['$event'])
onWindowClose(event: BeforeUnloadEvent): void {
  event.preventDefault();
  // 兼容新旧浏览器规范
  event.returnValue = '';
  return '';
}

• 验证功能时，先和页面做任意交互（比如点击页面空白处），再触发刷新/关闭页面操作，即可正常弹出提示。

补充说明：目前所有主流浏览器都不支持自定义beforeunload的弹窗内容，只会展示浏览器默认的提示文案，属于正常的安全限制。

内容的提问来源于stack exchange，提问作者Rocket Monkey