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

【问题标题】：Angular: Show Material Popup before Closing Browser WindowAngular：在关闭浏览器窗口之前显示材质弹出窗口
【发布时间】：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

【问题讨论】：

我认为必须有一部分代码告诉您要等到用户点击。在这里，您只是告诉在关闭之前显示弹出窗口。

标签： javascript angular typescript angular-material angular10

【解决方案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!';
  }

【讨论】：