使用angular2 @HostListener时onbeforeunload确认对话框不显示
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像
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:012像
而不是返回,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来自类别的问题 :
- angular 如何查看我使用的Angular版本?
- angular AngularJS:如何清除URL中的查询参数?
- angular angular:根据模型中的布尔值切换按钮文本
- angular Angular 2:是否强制使用括号/方括号?
- angular 在最新的TypeScript(大概是v1.5)示例中,@(符号)是什么意思?
- angular Angular 2.0绑定到样式的值
- angular Angular没有NameService的提供者
- angular 如何在Angular中使用jQuery?
- angular 如何使FileReader与Angular2一起使用?
- angular 如何在Angular 2中的组件之间共享数据?
- angular2-hostbinding AoT编译中的Angular2主机绑定问题
- angular2-hostbinding 在Angular 2中使用@HostBinding对模板子元素进行mouseenter / mouseleave时更改主机类
- angular2-hostbinding 角度2:获取HTML元素的位置
- angular2-hostbinding 使用angular2 @HostListener时onbeforeunload确认对话框不显示
- angular2-hostbinding 角@Hostbinding不起作用
- angular2-hostbinding 在Angular 4中将属性指令应用于组件
- angular2-hostbinding Angular2拖放时如何更改背景颜色
- angular2-hostbinding 将元素的宽度传递给我自己的指令时,ExpressionChangedAfterItHasBeenCheckedError。
- angular2-hostbinding 使用@HostBindings代替主角4
- angular2-hostbinding 如何使用@HostBinding将背景图像添加到Angular 2+指令中?