angular - 按下退出按钮时防止关闭 Angular Material Dialog 但在单击背景时允许关闭

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

您可以使用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!)