角度对话框：如何根据状态打开或关闭按钮

Question

我正在使用对话框组件，并且在打开对话框时需要主按钮来关闭对话框。 我正在使用对话框而没有背景覆盖，因为在打开对话框时，我需要用户与页面进行交互。对话框的关闭按钮可以正常工作。 我尝试了带有新变量的@Input，然后尝试了GetState和MatdialogState而没有成功，我只是打破按钮。我找不到任何例子。 这是我的代码：

export class DialogButton {

  constructor(
    public dialog: MatDialog,
    public dialogRef: MatDialogRef<DialogComponent>,
    ) { }

    toggleDialog() {
          this.dialog.open(DialogComponent, {
          id: 'legend-button-dialog-container',
          disableClose: false,
          hasBackdrop: false,
          });
        }
}

Answer 1

尝试这样的事情，应该起作用

dialogRef = null;

toggleDialog() {
    if(this.dialogRed === null){
        this.dialogRef = this.dialog.open(DialogComponent, {
            id: 'legend-button-dialog-container',
            disableClose: false,
            hasBackdrop: false,
        });
    }else{
        this.dialogRef.close();
        this.dialogRef = null;
    }
}

Answer 2

上面的代码生成了一个问题，如果我们使用“关闭”按钮关闭对话框，则需要在对话框按钮上两次插入对话框才能打开它。此代码修复了它：

export class MyButtonComponent {

  @Input() isDialogOpened: boolean;

  constructor(
    public dialog: MatDialog
    ) { }

    dialogRef = null;

    toggleDialog() {
      const dialogOpened = this.dialog.getDialogById('my-button-dialog-container');
        if(!dialogOpened) {
            this.dialogRef = this.dialog.open(MyButtonDialogComponent, {
                id: 'my-button-dialog-container',
                hasBackdrop: false,
            });
        } else {
            this.dialogRef.close();
        }
    }
}