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

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选项MatDialogConfig。将其作为第二个参数传递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演示（单击“打开第四个对话框”进行测试！）