如何控制打开多个对话框

4 回答

• 3

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

  回复于 2024-04-25T06:55:35+08:00
• 3

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

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

  回复于 2024-04-25T06:55:35+08:00
• 0

  我的解决方案是添加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 .

  回复于 2024-04-25T06:55:35+08:00
• 0

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

  Template

  <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>
  

  Component

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

  注意 - 如果您有多个按钮，您可以传递$事件，然后从中获取单击的按钮并相应地执行残疾操作

  StackBlitz工作Link

  回复于 2024-04-25T06:55:35+08:00