Angular 17中@HostListener监听beforeunload时关闭标签页无弹窗问题

确实是浏览器安全机制导致的差异，现在主流浏览器（Chrome、Firefox、Edge等）都对beforeunload事件的弹窗提示做了严格限制，核心目的是防止恶意网站滥用该功能骚扰用户。

你的代码逻辑本身是正确的——断点能触发说明事件已成功绑定并执行，但浏览器会根据场景和用户交互行为决定是否显示弹窗：

• 页面内导航（比如点击链接跳转）时，用户通常有明确的交互动作，浏览器会正常触发确认弹窗；
• 直接关闭标签页/窗口时，浏览器会额外校验：只有当用户在当前页面有过主动交互行为（比如点击按钮、输入内容、滚动页面等），才会显示确认弹窗；如果用户刚打开页面就直接关闭，即使beforeunload事件触发，浏览器也会静默跳过弹窗。

验证方式很简单：在页面上做一些交互（比如输入一段文字、点击某个按钮），再尝试关闭标签页，此时应该能正常弹出确认对话框。

另外需要注意，不同浏览器的具体限制逻辑略有差异，但核心都是围绕「用户主动交互」这个前提来控制弹窗的显示，避免无意义的干扰。

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