Question

默认情况下，按下 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');
  });
}

Answer 1

您可以使用disableClose的{{1}}选项。将其作为MatDialogConfig的第二个参数传递：

MatDialog#open

这应该防止 esc 关闭对话框。

编辑：我通过调整Marc的答案（作为对我的答案的评论）并使用openDialog() { this.dialog.open(MyDialogComponent, { disableClose: true }); // ... }来监听背景下的点击事件，从而解决了您的要求

最初，对话将MatDialogRef#backdropClick设置为disableClose。这样可以确保按下true键以及单击背景不会导致对话框关闭。

然后，订阅esc方法（单击背景幕时发出，并以MatDialogRef#backdropClick返回）。

无论如何，足够的技术交流。这是代码：

MouseEvent

Stackblitz demo (click on "Open fourth dialog" to test it out!)

防止在按下逃生按钮时关闭“角度材质对话框”，但在单击背景幕时允许关闭

1 个答案: