如何控制打开多个对话框

问题描述：

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

下面是APP链接

Angular 2 App

设置背景不透明度。所以一次只有一个Modal可用。 –

答

您可以尝试第一次点击后禁用按钮，以便没有后续的点击会出现这样的事情

模板

<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

答

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

答

我的解决办法是添加dialogRef就像一个范围变量，并检查是否为空，以防止开放的各种对话框点击此处查看

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

dialogRef: MdDialogRef<CommentDialogComponent>; 

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

，因为当你点击一个按钮创建一个新的dialogRef 。

如何控制打开多个对话框

相关推荐