Angular Material | 대화상자가 열려 있는지 확인합니다.

Angular Material | 대화상자가 열려 있는지 확인합니다.

앱에 경고 메시지를 표시하기 위해 Angular Material 대화 상자를 사용하고 있습니다.

다음과 같은 대화 상자가 이미 열려 있는지 확인해야 합니다.

private _openDialog() {
  // if (this.dialog.isOpen()) return; <-- NOT WORKING
  this.dialog.open(WarningComponent, {
    width: '450px',
    height: '380px',
  });

}

질문:Angular Material Dialog(각형 재료 대화 상자)가 이미 열려 있는지 확인할 수 있는 방법이 있습니까?

단일 구성 요소에 포함된 경우에는 참조를 저장하기만 하면 됩니다.조작에 유용합니다.

private _openDialog() {
  if (!this.dialogRef) return;
  this.dialogRef = this.dialog.open(WarningComponent, {
    width: '450px',
    height: '380px',
  });

  this.dialogRef.afterClosed().pipe(
    finalize(() => this.dialogRef = undefined)
  );
}

여러 구성 요소에 걸쳐 있는 경우 열려 있는 대화 상자 목록을 확인합니다.

private _openDialog() {
  if (!this.dialog.openDialogs || !this.dialog.openDialogs.length) return;
  this.dialog.open(WarningComponent, {
    width: '450px',
    height: '380px',
  });
}

사용할 수 있습니다.getState()의 방법MatDialogRef:

const matDialogRef = this.matDialog.open(MyDialogComponent);
if(this.matDialogRef.getState() === MatDialogState.OPEN) {
    // The dialog is opened.
}

이 .dialog.getDialogBy를 사용할 수 있습니다.ID:

        const dialogExist = this.dialog.getDialogById('message-pop-up');

        if (!dialogExist) {
          this.dialog.open(MessagePopUpComponent, {
            id: 'message-pop-up',
            data: // some data
          });
        }

내 해결책은 부울을 선언하는 것이었습니다.

public isLoginDialogOpen: boolean = false; // I know by default it's false

public openLoginDialog() {

if (this.isLoginDialogOpen) {
  return;
}

this.isLoginDialogOpen = true;

this.loginDialogRef = this.dialog.open(LoginDialogComponent, {
  data: null,
  panelClass: 'theme-dialog',
  autoFocus: false
});

this.loginDialogRef.afterClosed().subscribe(result => {
  this.isLoginDialogOpen = false;
  console.log('The dialog was closed');
});
}

언급URL : https://stackoverflow.com/questions/52259332/angular-material-check-if-dialog-is-open