Angular: 在关闭浏览器之前显示 Material 弹出窗口 Window

Question

我正在尝试显示 Angular Material 对话框（弹出 window），当用户点击 Chrome Window 关闭按钮（右上角）时。对话框模式应提示用户，如果他们想保存更改或取消，

但是它只显示快速秒的模式，然后关闭而不等待用户。使用下面的代码参考。如何解决？

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 浏览器弹出窗口，而是自定义弹出窗口。

Angular Material对话框： https://material.angular.io/components/dialog

Answer 1

beforeunload 事件不支持 return 承诺的回调函数，因此您无法显示弹出窗口和 return 值，因为它不是同步操作。

你可以做的只是 return 始终为 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()
    });
}

Answer 2

恐怕浏览器安全性不允许您阻止用户关闭 window。在我看来这是不可能的，你只能显示本机 window 警告用户如果关闭浏览器 window.

会丢失数据

Answer 3

这对我有用。但是你无法控制显示！

@HostListener('window:beforeunload', ['$event'])
  showAlertMessageWhenClosingTab($event) {
      $event.returnValue = 'Your data will be lost!';
  }

Angular: 在关闭浏览器之前显示 Material 弹出窗口 Window

Angular: Show Material Popup before Closing Browser Window

javascript

typescript

angular-material

angular

angular10