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

Question

我正在使用“ 角度材质”对话框在我的应用中显示警告消息。

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

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

}

问题：有什么方法可以检查角度材料对话框是否已打开？

Answer 1

getState()您可以在以下位置使用该方法MatDialogRef：

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

Answer 2

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

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 3

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

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