Question

我正在使用Angular Material dialog在我的应用中显示警告消息。

我需要检查对话框是否已经打开，像这样：

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

}

问题：是否可以检查“角度材料”对话框是否已打开？

Answer 1

如果它在单个组件中，则只需存储引用。对操纵它很有用。

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

Answer 2

我的解决方案是声明一个布尔值

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

Answer 3

您可以在getState()上使用MatDialogRef方法：

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

Answer 4

您可以使用this.dialog.getDialogById：

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

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

Answer 5

能否请您参考此链接check existing of open dialog

private _openDialog() {
  // Only show if not already open
  if ($('.mat-dialog-container').length > 0) return;
  this.dialog.open(WarningComponent, {
     width: '450px',
     height: '380px',
  });
}

角材料|检查对话框是否打开

5 个答案: