如何控制打开多个对话框答案

【问题标题】：How to control opening multiple dialogs如何控制打开多个对话框
【发布时间】：2017-08-30 05:22:07
【问题描述】：

我使用 Angular Material UI 在 Angular 2 中创建了模态对话框。应用程序有两个按钮，当我们单击任何按钮时，对话框应该打开。我可以在单击按钮时打开模态对话框，但是当我们连续单击按钮时会打开多个对话框。如果一个对话框已经存在，我们如何只打开一个对话框并限制应用打开另一个对话框。

以下是APP链接

Angular 2 App

【问题讨论】：

设置背景不透明度。这样一次只有一个 Modal 可用。

标签： angular dialog angular-material

【解决方案1】：

if(this.dialog.openDialogs.length==0){
   dialogRef = this.dialog.open(ModalComponent, {
    // disableClose: true  
  });

这对于删除多个打开的对话框很有用

【讨论】：

但是，如果您有一些包含一些消息的数组要在对话框中显示，并且只想在上一个对话框关闭时才显示下一个对话框，该怎么办？

【解决方案2】：

我的解决方案是像范围变量一样添加 dialogRef 并检查是否为 null 以防止打开多个对话框。看这里

https://stackblitz.com/edit/angular-js6t7b?file=app/app.component.ts

dialogRef: MdDialogRef<CommentDialogComponent>;

open(){
  if(this.dialogRef == null){
   //do the thing
 }
}

因为当您单击其中一个按钮时，您创建了一个新的 dialogRef。

【讨论】：

这并不总是有效。我以前这样做过，然后不知何故弹出了两个对话框。 Shikha Agarwal 的解决方案更好，imo。
这对我也不起作用。我正在基于订阅 observable 打开对话框，而且订阅触发的速度似乎比 dialogref 的更新速度更快。

【解决方案3】：

您可以添加 href 以引用不同组件的打开状态并在某些状态下禁用打开，这是工作链接https://stackblitz.com/edit/angular-yttuya?file=app/app.component.ts

【讨论】：

【解决方案4】：

您可以尝试在第一次单击后禁用该按钮，以便以后不会发生类似这样的单击

模板

<button md-raised-button color="primary" (click)="open('first')" [disabled] = "first"> Open first dialog</button>
<button md-raised-button color="primary" (click)="open('second')" [disabled] = "second">Open second dialog</button>

组件

export class AppComponent {
  name = 'Angular 4';
  first = false;
  second = false;
  constructor(public dialog : MdDialog) {}

  open(event) {
    if (event === "first") {
      this.first = true;
      this.second = false;
    } else {
      this.first = false;
      this.second = true;
    }

    let dialogRef: MdDialogRef<CommentDialogComponent> = this.dialog.open(CommentDialogComponent);
    dialogRef.componentInstance.invoiceItemComments = [
      {
        comments: 23,
        createdBy: "NO2",
        createdDate: 1.4
      }, {
        comments: 23,
        createdBy: "NO2",
        cvreatedDate: 1.4
      }, {
        comments: 23,
        createdBy: "NO2",
        createdDate: 1.4
      }
    ];
    dialogRef.afterClosed().subscribe(result => {
      dialogRef = null;
      this.first = false;
      this.second = false;
    });
  }
}

注意 - 如果您有多个按钮，您可以传递 $event 并从那里得到点击哪个按钮并相应地采取行动

StackBlitz 工作 Link

【讨论】：

【解决方案5】：

只需检查对话窗口的引用是否存在。如果确实存在，则表示对话窗口已经打开，只是从函数返回，它不会再次打开。

 openDialogWindowFunc(){
// make sure dialog wont open more than once 
    if (this.communicationRef) {
      return;
    }

    this.communicationRef = this.dialog.open(CommunicationComponent, {
      panelClass: 'recipients-popup',
      width: '555px',
      maxHeight: 606,
      position: { top: '60px', left: '60px' }
    });
}

【讨论】：

【解决方案6】：

您可以使用以下方法来防止打开多个角度材质对话框。在按钮单击/任何事件（Ex-open(){}）上添加以下条件：-

    open(e) {
    
    if(this.dialog.openDialogs && this.dialog.openDialogs.length > 0){
      return false;
    }
    let dialogRef: MdDialogRef<ExampleDialogComponent> = this.dialog.open(
      ExampleDialogComponent
    );
    dialogRef.afterClosed().subscribe((result) => {
      dialogRef = null;
      //add code to perform any other actions on pop-up close.
    });
  }
}

【讨论】：