Это можно сделать двумя способами.
В методе, который открывает диалоговое окно, передайте следующий параметр конфигурации disableClose
в качестве второго параметра MatDialog#open()
и установите для него значение true
:
export class AppComponent {
constructor(private dialog: MatDialog){}
openDialog() {
this.dialog.open(DialogComponent, { disableClose: true });
}
}
Или сделайте это в самом диалоговом компоненте.
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ключ не закрыл диалоговое окно, но разрешил щелкнуть по фону для закрытия, я адаптировал ответ Марка, а также использовал MatDialogRef#backdropClick
для прослушивания событий щелчка на фоне.
Первоначально диалог будет иметь опцию конфигурации disableClose
набор как true
. Это гарантирует, что esc
нажатие клавиши, а также нажатие на фон не приведет к закрытию диалога.
После этого подпишитесь на MatDialogRef#backdropClick
метод (который излучается при нажатии на фон и возвращается как a MouseEvent
).
В любом случае, достаточно технических разговоров. Вот код:
openDialog() {
let dialogRef = this.dialog.open(DialogComponent, { disableClose: true });
dialogRef.backdropClick().subscribe(() => {
dialogRef.close();
})
}
Как вариант, это можно сделать в диалоговом компоненте:
export class DialogComponent {
constructor(private dialogRef: MatDialogRef<DialogComponent>) {
dialogRef.disableClose = true;
dialogRef.backdropClick().subscribe(() => {
dialogRef.close();
})
}
}
@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }
Как насчет игры с этими двумя свойствами?
источник
Добавить
к коду модели.
источник