我目前正在Angular 4项目的密码重置页面上工作。我们正在使用Angular Material来创建对话框,但是,当客户端单击该对话框时,它将自动关闭。有没有办法避免对话框关闭,直到我们的代码端调用“关闭”功能?还是应该创建一个不可关闭的模态?
Answers:
有两种方法可以做到这一点。
在打开对话框的方法中,将以下配置选项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演示
这是其他一些使用案例以及如何实现它们的代码段。
就像@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();
}
}
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();
})
}
}
玩这两个属性怎么样?
disableClose:布尔值-用户是否可以使用转义或单击背景关闭模式。
hasBackdrop:布尔值-对话框是否具有背景。
@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }