Question

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

以下是APP链接

Angular 2 App

Answer 1

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

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

Answer 2

我的解决方案是添加dialogRef就像一个范围变量并检查是否为null以防止打开各种对话框检查

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

id    Name     City     College Name      City    Passport No      Country     Current Employe      Experience
 1    Mazhar   Banglore   R K           Banglore    A5222           India    XYZ                   2

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

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工作Link

Answer 4

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

Answer 5

只需检查对话框窗口的引用是否存在。如果确实存在，则表示对话框窗口已经打开，并且仅从func返回而不会再次打开。

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

如何控制打开多个对话框

5 个答案: