Angular:在关闭浏览器窗口之前显示材质弹出窗口
Posted
技术标签:
【中文标题】Angular:在关闭浏览器窗口之前显示材质弹出窗口【英文标题】:Angular: Show Material Popup before Closing Browser Window 【发布时间】:2020-11-21 23:49:49 【问题描述】:当用户点击 Chrome 窗口关闭按钮(右上角)时,我正在尝试显示 Angular Material 对话框(弹出窗口)。 Dialog 模式应该提示用户,如果他们想要保存更改,或者取消,
但是,它只显示快速第二次的模式,然后在不等待用户的情况下关闭。 使用下面的代码参考。怎么解决?
How can we detect when user closes browser?
@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event)
this.openDocumentSaveDialog();
public openDocumentSaveDialog(): void
const documentSaveDialogRef = this.documentSaveDialog.open(DocumentSaveDialogComponent,
width: '600px',
height: '200px',
disableClose: true,
autoFocus: false,
data: null
);
documentSaveDialogRef.afterClosed().subscribe(result =>
this.closeMenu.emit()
);
注意:我们不想显示原生 chrome 浏览器弹出窗口,而是自定义弹出窗口。
角度材质对话框: https://material.angular.io/components/dialog
【问题讨论】:
我认为必须有一部分代码告诉您要等到用户点击。在这里,您只是告诉在关闭之前显示弹出窗口。 【参考方案1】:beforeunload 事件不支持返回承诺的回调函数,因此您无法显示弹出窗口和返回值,因为它不是同步操作。
你可以做的只是总是返回 false 或调用
event.preventDefault()
如果用户决定离开页面,您可以致电
window.close(....)
如果没有,您已经取消了活动。
所以你的代码应该是这样的
@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event)
this.openDocumentSaveDialog();
event.preventDefault();
event.returnValue = '';
return false;
public openDocumentSaveDialog(): void
const documentSaveDialogRef =
this.documentSaveDialog.open(DocumentSaveDialogComponent,
width: '600px',
height: '200px',
disableClose: true,
autoFocus: false,
data: null
);
documentSaveDialogRef.afterClosed().subscribe(result =>
if(!result)
window.close()
this.closeMenu.emit()
);
【讨论】:
谢谢,你能在下面显示完整的代码库吗? @HostListener('window:beforeunload', ['$event']) 刚试了,不行,直接关窗 试过这个,但它不起作用,你能分享任何stackblitz链接吗?【参考方案2】:恐怕浏览器安全性不允许您阻止用户关闭窗口。在我看来这是不可能的,您只能显示本机窗口,警告用户如果关闭浏览器窗口会丢失数据。
【讨论】:
【参考方案3】:这对我有用。但是您无法控制显示!
@HostListener('window:beforeunload', ['$event'])
showAlertMessageWhenClosingTab($event)
$event.returnValue = 'Your data will be lost!';
【讨论】:
以上是关于Angular:在关闭浏览器窗口之前显示材质弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章
百度统计 可以统计页面上的JS的弹出窗的打开次数吗? 怎么实现?
Angular Material:弹出窗口:允许窗口在前后之间移动