Angular：在关闭浏览器窗口之前显示材质弹出窗口

Posted 2023-03-13

【中文标题】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!';