web-dev-qa-db-ja.com

Angularエスケープボタンが押されたときにマテリアルダイアログを閉じないようにするが、背景がクリックされたときに閉じることを許可する

デフォルトでは、 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');
  });
}
angularangular-materialangular-material2
6
通りすがりのおっさん

disableCloseのMatDialogConfigオプションを使用できます。 MatDialog#openの2番目のパラメーターとして渡します。

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

これは防ぐ必要があります esc ダイアログを閉じることから。

編集：マークの回答を（私の回答へのコメントとして）変更し、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デモ（[第4ダイアログを開く]をクリックしてテストしてください！）

2
Edric