如何控制打开多个对话框

Question

我使用角度材质UI在角度2中创建了模态对话框.App有两个按钮,当我们点击任何按钮时,对话框应该打开.我可以在按钮单击时打开模态对话框,但是当我们连续点击按钮时会打开多个对话框.我们如何只打开一个对话框并限制应用程序打开另一个对话框(如果已存在).

以下是APP链接

Angular 2 App

Answer 1

我的解决方案是像范围变量一样添加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。

Answer 2

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

这对于删除多个打开对话框非常有用

Answer 3

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

模板

<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 工作链接