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

Question

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

我需要检查对话框是否已经打开，如下所示：

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

}

问题：有没有办法检查Angular Material对话框是否已经打开？

Answer 1

如果它在一个组件中，只需存储ref。用于操纵它。

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

你能否参考这个链接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',
  });
}