使用@HostListener 钩子，但确认对话框（询问：你想离开这个页面吗？...或者你想重新加载这个页面吗？）没有显示。
该代码有效，但未显示确认对话框。
这是我所拥有的：
@HostListener('window:beforeunload', ['$event'])
public doSomething($event) {
console.log("do I see this?") // <---- this logs to the console.
return "something else";
}
但我没有看到这个：
返回false而不是字符串"something else"解决了问题，并显示了确认对话框。
角度绑定很可能会修改返回值
对于仍在寻找另一种在 Angular 中处理此问题的方法的人。您可以尝试这样做：
<router-outlet (window:beforeunload)="doBeforeUnload()" (window:unload)="doUnload()"></router-outlet>
在这里，我将事件添加到事件路由器出口，因为它是我 app.component.html 中唯一的东西，但您可以将其添加到容器或包装器中。还添加了这两个事件，因为一个beforeunload只会在返回 false 时向用户显示警报，然后unload处理实际的关闭事件。这很重要，因为您可能想知道当用户继续或实际决定关闭或处理不需要的点击时该怎么做。实际功能如下所示：
doBeforeUnload() {
// Alert the user window is closing
return false;
}
doUnload() {
// Clear session or do something
this.auth.getLogout();
}
PD：我在 Angular 6 中对此进行了测试。
false你需要返回而不是返回$event.returnValue = "your text"
现代浏览器不显示您输入的文本。
@HostListener('window:beforeunload', ['$event'])
yourfunction($event) {
return $event.returnValue='Your changes will not be saved';
}
你需要退回这个
return $event.returnValue = "something";
但是，在现代浏览器中，您设置的消息将不会显示。浏览器将仅显示其浏览器默认值