0

ユーザーが Chrome ウィンドウの [閉じる] ボタン (右上) を押したときに、Angular Material ダイアログ ボックス (ポップアップ ウィンドウ) を表示しようとしています。ダイアログモーダルは、ユーザーが変更を保存したい場合、またはキャンセルしたい場合、ユーザーにプロンプ​​トを表示する必要があります。

ただし、モーダルは一瞬しか表示されず、ユーザーを待たずに閉じます。以下のコード参照を使用します。どうすれば修正できますか？

ユーザーがブラウザを閉じたことをどのように検出できますか?

@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()
    });
}

ここに画像の説明を入力

注: ネイティブ クローム ブラウザのポップアップを表示するのではなく、カスタム ポップアップを表示します。

Angular マテリアル ダイアログ ボックス: https://material.angular.io/components/dialog

4

3 に答える 3