Angular Material | 检查对话框是否已打开

Question

我正在使用Angular Material对话框在我的应用中显示警告信息。

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

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

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

- Vingtoft

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

- user4676340

---

如果你已经知道如何做了，为什么还要问呢...是的，你可以这样做，但使用这些方法会给你一个对话框引用，这意味着你可以在需要时关闭对话框。布尔值不允许这样做。 - user4676340

使用布尔标志会增加许多代码行。我正在寻找更简洁的解决方案。 - Vingtoft

你提到了布尔标志，不是我——而且你的意思是告诉我，在封装组件中使用JQuery比使用官方文档更清晰？好吧...祝你的“清洁”项目好运。 - user4676340

因为第二个示例提供了对当前打开的对话框数组的引用，而不是组件当前打开的对话框。这意味着您无法知道哪个对话框属于您的组件，您可能会关闭您想要保持打开的对话框。但另一方面，这取决于您要做什么，由于我不知道您想要做什么，我更愿意留下这两个答案，让人们决定他们想要实现什么。 - user4676340

做到了，只是加了一句话！ - user4676340

Answer 2

你可以使用 MatDialogRef 上的 getState() 方法：

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

- Jonatan Dragon

Answer 3

你可以使用 this.dialog.getDialogById：

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

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

- Vasyl Kobetiak

---

补充上面的内容，getDialogById返回对话框的dialogRef。 这也意味着，如果对话框已经打开，您可以订阅对话框的关闭，从而意味着多个不同的项目可以等待结果。我有一个登录对话框，当返回401时显示它，但显然使用rest时，有时会进行多次调用——这意味着在登录发生并且对话框关闭后，所有调用都可以重试。 - ismoore999

Answer 4

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

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

- C.Ikongo

---

如果这是一个组件，你应该将isLoginDialogOpen设置为单例。否则，如果有多个实例，你仍然可以打开它两次。 - ismoore999