onbeforeunload 确认对话框在使用 angular2 @HostListener 时不显示

Question

使用@HostListener 挂钩，但未显示确认对话框（询问：是否要离开此页面？...或是否要重新加载此页面？）。

代码有效，但未显示确认对话框。

这是我的：

@HostListener('window:beforeunload', ['$event'])
public doSomething($event) {
    console.log("do I see this?") // <---- this logs to the console.

    return "something else";
}

但我没看到这个：

Answer 1

returning false 而不是字符串 "something else" 修复了问题并显示了确认对话框。

angular 绑定很可能会修改 return 值

Answer 2

你需要return这个

return $event.returnValue = "something";

但是，在现代浏览器中，您设置的消息不会显示。浏览器将只显示其浏览器默认设置

Answer 3

而不是 returning false 你需要 return $event.returnValue = "your text"

现代浏览器不显示您输入的文本。

@HostListener('window:beforeunload', ['$event']) 
yourfunction($event) {
    return $event.returnValue='Your changes will not be saved';
}

Answer 4

对于还在 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.

中对此进行了测试

Answer 5

请注意 beforeunload 和 unload 事件侦听器都有副作用，以防您计划使用 bfcache （back/forward 缓存）在您的 Angular 应用程序中。所以谨慎使用。阅读此处：https://web.dev/bfcache/#only-add-beforeunload-listeners-conditionally

onbeforeunload 确认对话框在使用 angular2 @HostListener 时不显示

onbeforeunload confirm dialog not showing when angular2 @HostListener is used

angular2-hostbinding

angular