質問

現在、Angular4のプロジェクトでパスワードリセットのページを作成しています。Angular Materialを使用してダイアログを作成していますが、クライアントがダイアログをクリックすると、自動的に閉じてしまいます。私たちのコード側が"close"関数を呼び出すまで、ダイアログが閉じるのを避ける方法はありますか？あるいは、どのように 開閉不能 モーダル？

解決方法は？

2つの方法があります。

1. ダイアログを開くメソッドで、次の設定オプションを渡します。 disableClose の2番目のパラメータとして MatDialog#open() に設定し、それを true :

   export class AppComponent {
     constructor(private dialog: MatDialog){}
     openDialog() {
       this.dialog.open(DialogComponent, { disableClose: true });
     }
   }
   
   

2. あるいは、ダイアログコンポーネント自体で行う。

   export class DialogComponent {
     constructor(private dialogRef: MatDialogRef<DialogComponent>){
       dialogRef.disableClose = true;
     }
   }
   
   

こんな感じです。

そして、こちらは Stackblitzのデモ

その他の使用例

その他のユースケースと、それを実装するためのコードスニペットを紹介します。

許可する エスケープ をクリックするとダイアログを閉じますが、背景をクリックするとダイアログを閉じないようにします。

私の回答の下のコメントで@MarcBrazeauが言っているように、このメソッドは エスケープ キーでモーダルを閉じますが、モーダル外のクリックは許可されません。このコードをダイアログ コンポーネントで使用してください。

import { Component, OnInit, HostListener } from '@angular/core';
import { MatDialogRef } from '@angular/material';
@Component({
  selector: 'app-third-dialog',
  templateUrl: './third-dialog.component.html'
})
export class ThirdDialogComponent {
  constructor(private dialogRef: MatDialogRef<ThirdDialogComponent>) {      
}
  @HostListener('window:keyup.esc') onKeyUp() {
    this.dialogRef.close();
  }

}

防止する エスケープ をクリックするとダイアログが閉じますが、背景をクリックすると閉じることができます。

追伸：この回答は、以下のサイトからのものです。 この回答 このデモは、この回答を元に作成されました。

を防ぐために エスケープ キーでダイアログを閉じることはできないが、背景をクリックすれば閉じることができるようにするため、Marc の回答を参考にし、さらに MatDialogRef#backdropClick を使用して、背景へのクリックイベントをリッスンしています。

初期状態では、ダイアログには設定オプションである disableClose として設定します。 true . これにより esc を押しても、背景をクリックしても、ダイアログは閉じません。

その後 MatDialogRef#backdropClick メソッド (背景がクリックされたときに発行され、その結果を MouseEvent ).

とにかく、技術的な話はもう十分です。以下はそのコードです。

openDialog() {
  let dialogRef = this.dialog.open(DialogComponent, { disableClose: true });
  /*
     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();
  })

  // ...
}

あるいは、ダイアログコンポーネントで行うこともできます。

export class DialogComponent {
  constructor(private dialogRef: MatDialogRef<DialogComponent>) {
    dialogRef.disableClose = true;
    /*
      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();
    })
  }
}