web-dev-qa-db-ja.com

角度材料ダイアログ領域の外側のクリックを無効にしてダイアログを閉じます（Angularバージョン4.0+を使用）

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

angulardialogmodal-dialogangular-material
46
Zeqing Zhang

それを行うには2つの方法があります。

  1. ダイアログを開くメソッドで、次の構成オプションdisableCloseをMatDialog#open()の2番目のパラメーターとして渡し、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;
  }
}

探しているものは次のとおりです。

<code>disableClose</code> property in material.angular.io

そして、これが Stackblitzデモ です

その他のユースケース

以下に、他の使用例とそれらの実装方法のコードスニペットを示します。

許可する esc ダイアログを閉じるが、背景をクリックしてダイアログを閉じることを禁止する

@MarcBrazeauが私の答えの下のコメントで言ったように、あなたは許可することができます esc キーを押してモーダルを閉じますが、モーダルの外側をクリックすることはできません。ダイアログコンポーネントで次のコードを使用します。

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

}

防ぐ esc ダイアログを閉じませんが、背景をクリックして閉じます

追伸これは this answer に由来する回答であり、デモはこの回答に基づいていました。

防ぐために esc キーを押してダイアログを閉じますが、背景をクリックして閉じることを許可します。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();
    })
  }
}
129
Edric

これは私のために働く

  openDialog() {
    this.dialog.open(YourComponent, { disableClose: true });
  }
1
Akitha_MJ

RTFM

ドキュメントによれば here を使用すると、disableClose入力を使用して、ユーザーがダイアログを閉じるのを防ぐことができます。

0
Abdel

私はこれが数年前であることを知っていますが、backdrop: 'static'を使用して外部クリックを無効にし、keyboard: falseを使用してエスケープを無効にすることはできませんか？

Docs モーダルセクションまでスクロールします。 Angular 4+に適していると確信しています。

Mehの例：

import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";

@Component({
  // Setup stuff..
})

export class ModalExample {
  modalRef: BsModalRef;

  constructor(
    private modalService: BsModalService, 
  ) { }

  ngOnInit(): void {

  }

  public openConfirmationModal(submitClaimResult: SubmitDealerClaimResult) {
    this.modalRef = this.modalService.show({backdrop: 'static', keyboard: false });
  }

}
0
DForsyth