Ответ 1

Есть два способа сделать это.

1. В методе, открывающем диалоговое окно, передайте следующий параметр конфигурации disableClose в качестве второго параметра в MatDialog#open() и установите для него значение true:

   export class AppComponent {
     constructor(private dialog: MatDialog){}
     openDialog() {
       this.dialog.open(DialogComponent, { disableClose: true });
     }
   }
   

2. В качестве альтернативы, сделайте это в самом компоненте диалога.

   export class DialogComponent {
     constructor(private dialogRef: MatDialogRef<DialogComponent>){
       dialogRef.disableClose = true;
     }
   }
   

Вот что вы ищете:

И вот демо Stackblitz

Другие варианты использования

Вот некоторые другие варианты использования и фрагменты кода о том, как их реализовать.

Разрешить esc закрыть диалог, но не разрешать щелкать по фону, чтобы закрыть диалог

Как и то, что @MarcBrazeau сказал в комментарии ниже моего ответа, вы можете позволить клавише esc закрывать модальное окно, но по-прежнему запрещать щелчок вне модального окна. Используйте этот код в вашем диалоговом компоненте:

import { Component, OnInit, HostListener } from '@angular/core';
import { MatDialogRef } from '@angular/material';
@Component({
  selector: 'app-third-dialog',
  templateUrl: './third-dialog.component.html'
})
export class ThirdDialogComponent {
  constructor(private dialogRef: MatDialogRef<ThirdDialogComponent>) {      
}
  @HostListener('window:keyup.esc') onKeyUp() {
    this.dialogRef.close();
  }

}

Запретить esc закрывать диалоговое окно, но разрешать щелкать фон, чтобы закрыть

PS Это ответ, который возник из этого ответа, где демонстрация была основана на этом ответе.

Чтобы клавиша esc не закрывала диалоговое окно, но позволяла щелкать фон, чтобы закрыть, я адаптировал ответ Marc, а также использовал MatDialogRef#backdropClick для прослушивания событий щелчка на фоне.

Изначально в диалоговом окне для параметра конфигурации disableClose задано значение true. Это гарантирует, что нажатие клавиши esc, а также нажатие на заднем плане не приведут к закрытию диалога.

После этого подпишитесь на метод MatDialogRef#backdropClick (который генерируется при щелчке фона и возвращается как MouseEvent).

В любом случае, достаточно технических разговоров. Вот код:

openDialog() {
  let dialogRef = this.dialog.open(DialogComponent, { disableClose: true });
  /*
     Subscribe to events emitted when the backdrop is clicked
     NOTE: Since we won't actually be using the 'MouseEvent' event, we'll just use an underscore here
     See https://stackoverflow.com/a/41086381 for more info
  */
  dialogRef.backdropClick().subscribe(() => {
    // Close the dialog
    dialogRef.close();
  })

  // ...
}

В качестве альтернативы, это можно сделать в диалоговом компоненте:

export class DialogComponent {
  constructor(private dialogRef: MatDialogRef<DialogComponent>) {
    dialogRef.disableClose = true;
    /*
      Subscribe to events emitted when the backdrop is clicked
      NOTE: Since we won't actually be using the 'MouseEvent' event, we'll just use an underscore here
      See https://stackoverflow.com/a/41086381 for more info
    */
    dialogRef.backdropClick().subscribe(() => {
      // Close the dialog
      dialogRef.close();
    })
  }
}

Ответ 2

Это работает для меня

  openDialog() {
    this.dialog.open(YourComponent, { disableClose: true });
  }

Ответ 3

Я знаю, что это пара лет, но разве вы не можете использовать backdrop: 'static' чтобы отключить щелчок снаружи, и keyboard: false чтобы отключить escape?

Документы пролистывают вниз до модального раздела. Уверен, это хорошо для Angular 4+.

Meh Пример:

import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";

@Component({
  // Setup stuff..
})

export class ModalExample {
  modalRef: BsModalRef;

  constructor(
    private modalService: BsModalService, 
  ) { }

  ngOnInit(): void {

  }

  public openConfirmationModal(submitClaimResult: SubmitDealerClaimResult) {
    this.modalRef = this.modalService.show({backdrop: 'static', keyboard: false });
  }

}

Ответ 4

Что если вы откроете модал, а затем откроете следующий из него. Итак, у вас есть 2 открытых модала. Я хочу предотвратить фоновый щелчок всех из них, но я хочу, чтобы пользователь дважды щелкнул по ESCAPE соответственно и закрыл модальное по одному кнопкой ESCAPE.

Следующая проблема заключается в том, что если второй модал имеет элемент управления Mat-Select, который открывается и ожидает закрытия Escape.

Это немного сложно, какие-нибудь идеи?

Ответ 5

Согласно документации здесь вы можете использовать вход disableClose, чтобы пользователь не мог закрыть диалоговое окно.