В настоящее время я работаю на странице сброса пароля проекта Angular 4. Мы используем Angular Material для создания диалогового окна, однако, когда клиент щелкает из диалогового окна, он автоматически закрывается. Есть ли способ избежать закрытия диалогового окна, пока наша кодовая сторона не вызовет функцию "закрыть"? Или как мне создать непривлекательный модальный?
Отключить клик за пределами диалогового окна углового материала, чтобы закрыть диалоговое окно (с угловой версией 4. 0+).
Ответ 1
Есть два способа сделать это.
-
В методе, открывающем диалоговое окно, передайте следующий параметр конфигурации
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 не закрывала диалоговое окно, но позволяла щелкать фон, чтобы закрыть, я адаптировал ответ 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
, чтобы пользователь не мог закрыть диалоговое окно.