Angular Dialog：如何根据状态打开或关闭按钮答案

【问题标题】：Angular Dialog: How to make the button open or close depending on stateAngular Dialog：如何根据状态打开或关闭按钮
【发布时间】：2022-06-24 02:37:05
【问题描述】：

我正在使用对话框组件，我需要在打开对话框时使用主按钮来关闭对话框。我正在使用没有背景覆盖的对话框，因为我需要用户在打开对话框时与页面进行交互。对话框的关闭按钮工作正常。我用一个新变量尝试了@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,
          });
        }
}

【问题讨论】：

你指的是什么按钮作为主按钮，我可以附上你的对话框组件代码吗？
是的，我指的是我们点击打开对话框组件的对话框按钮。

标签： angular dialog toggle mat-dialog getstate

【解决方案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;
    }
}

【讨论】：

太棒了，它很有魅力，谢谢！

【解决方案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();
        }
    }
}

【讨论】：