防止在按下逃生按钮时关闭“角度材质对话框"，但在单击背景幕时允许关闭 [英] Prevent closing of Angular Material Dialog when escape button is pressed but allow closing when backdrop is clicked

问题描述

默认情况下，按下 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监听背景下的点击事件，我设法解决了您的要求./p>

最初，对话将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演示(单击打开第四个对话框"进行测试！)

By default, when the esc button is pressed, the dialog closes. However, I don't want this intended behaviour.

What I would like to happen is to prevent closing when the esc button is pressed but still allow a click on the backdrop to close the dialog. How can this be done?

I've tried something like this. However, it doesn't work:

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');
  });
}

解决方案

You can use the disableClose option of MatDialogConfig. Pass it in as the second parameter of MatDialog#open:

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

This should prevent esc from closing the dialog.

---

EDIT: I managed to solve what you asked for by adapting Marc's answer (as a comment on my answer), as well as using MatDialogRef#backdropClick to listen for click events to the backdrop.

Initially, the dialogue will have disableClose set as true. This ensures that the esc keypress, as well as clicking on the backdrop will not cause the dialogue to close.

Afterwards, subscribing to the MatDialogRef#backdropClick method (which emits when the backdrop gets clicked and returns as a MouseEvent).

Anyways, enough technical talk. Here's the code:

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!)

这篇关于防止在按下逃生按钮时关闭“角度材质对话框"，但在单击背景幕时允许关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！