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

angular angular2-hostbinding

10461 观看

4回复

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

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

这是我所拥有的： 

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

    return "something else";
}

但我看不到：

在此处输入图片说明

作者: raneshu 的来源 发布者: 2019 年 10 月 11 日

回应 (4)

10像

决定

返回false而不是字符串"something else"可解决问题，并显示确认对话框。

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

作者: raneshu 发布者: 24.03.2017 03:59

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中对此进行了测试。

作者: ART-Prime 发布者: 03.07.2018 12:01

2像

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

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

@HostListener('window:beforeunload', ['$event']) 
yourfunction($event) {
    return $event.returnValue='Your changes will not be saved';
}
作者: nitin hawaldar 发布者: 12.09.2017 03:59

1像

您需要退货

return $event.returnValue = "something";

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

作者: Huangism 发布者: 05.04.2017 05:15
32x32