按下退出按钮时防止关闭 Angular Material 对话框，但单击背景时允许关闭

小编典典

按下退出按钮时防止关闭 Angular Material 对话框，但单击背景时允许关闭

javascript

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

阅读 177

2022-07-30

共1个答案

小编典典

您可以使用的disableClose选项MatDialogConfig。将其作为的第二个参数传入MatDialog#open：

openDialog() {
  this.dialog.open(MyDialogComponent, { disableClose: true });
  // ...
}

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

编辑：我设法通过调整 Marc 的答案（作为对我的答案的评论）解决了您的要求，并使用MatDialogRef#backdropClick在背景中监听点击事件。

最初，对话将disableClose设置为true。这确保了esc按键以及单击背景不会导致对话关闭。

之后，订阅该MatDialogRef#backdropClick方法（当背景被点击时发出并以 a 形式返回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();
  })

  // ...
}

2022-07-30