Angular: Показать всплывающее окно с материалами перед закрытием окна браузера

Question

Я пытаюсь показать диалоговое окно Angular Материал (всплывающее окно), когда Пользователь нажимает кнопку Chrome Закрыть окно (вверху справа). Модальный диалог должен содержать подсказку пользователю, если он хочет сохранить изменения или отменить,

Однако он показывает модальное окно только на короткую секунду, а затем закрывается, не дожидаясь пользователя. Используя приведенную ниже ссылку на код. Как это исправить?

Как определить, когда пользователь закрывает браузер?

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

Note: We do Not want to display Native chrome browser popup, but a custom popup .

Angular Material Dialog Box: https://material.angular.io/components/dialog

Answer 1

Боюсь, что безопасность браузера не позволит вам помешать пользователю закрыть окно. На мой взгляд, это невозможно, вы можете показать только собственное окно, которое предупреждает пользователя о потере данных при закрытии окна браузера.

Answer 2

Событие beforeunload не поддерживает функцию обратного вызова, которая возвращает обещание, поэтому вы не можете показать всплывающее окно и возвращаемое значение, так как это не операция syn c.

что вы можете сделать вместо этого просто всегда возвращает 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()
    });
}