默认情况下,当按下 esc 按钮时,对话框会关闭。但是,我不希望出现这种预期行为。
我想要发生的是在按下 esc 按钮时阻止关闭,但仍允许单击背景以关闭对话框。如何做到这一点?
我试过这样的事情。但是,它不起作用:
openEditDialog() {
const dialogRef = this.dialog.open(EditPlaceDialogComponent, {
width: '90%',
height: '720px'
});
dialogRef.keydownEvents().subscribe(e => {
if (e.keyCode === 27) {
e.preventDefault();
dialogRef.disableClose = false;
}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
最佳答案
您可以使用MatDialogConfig
的disableClose
选项。作为MatDialog#open
的第二个参数传入:
openDialog() {
this.dialog.open(MyDialogComponent, { disableClose: true });
// ...
}
这应该可以防止 esc 关闭对话框。
编辑: 我设法通过调整 Marc 的回答(作为对我的回答的评论)以及使用 MatDialogRef#backdropClick
来听取单击事件到背景。
最初,对话会将 disableClose
设置为 true
。这确保了 esc
按键以及点击背景不会导致对话关闭。
然后,订阅 MatDialogRef#backdropClick
方法(当背景被点击时发出并作为 MouseEvent
返回)。
无论如何,足够的技术讨论。这是代码:
openDialog() {
let dialogRef = this.dialog.open(EditPlaceDialogComponent, { disableClose: true /* Your other config options here */ });
/*
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();
})
// ...
}
Stackblitz demo (click on "Open fourth dialog" to test it out!)
关于angular - 按下退出按钮时防止关闭 Angular Material Dialog 但在单击背景时允许关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51010064/