使用angular2 @HostListener时,onbeforeunload确认对话框未显示

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

返回false而不是字符串"something else"修复问题并显示确认对话框.

角度绑定很可能会修改返回值

Answer 2

false你需要返回而不是返回$event.returnValue = "your text"

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

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

Answer 3

对于仍在寻找其他方法来处理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中对此进行了测试。