如何根据 Angular 中确认子对话框中选择的答案关闭父对话框？

Question

我正在尝试根据 Angular 中对子确认垫对话框的回答关闭父垫对话框。子确认对话框显示“您有未保存的更改。您确定要关闭吗？”如果用户单击“是”，那么两个对话框都应该关闭。如果他们说不，那么应该只关闭确认对话框。 NO 有效但 YES 无效。

这是带有两个按钮的模板

<mat-dialog-actions align="end">
  <button
    mat-button color="accent" (click)="save()" [mat-dialog-close]="true" cdkFocusInitial
  >Save
  </button>
  <button mat-button (click)="openConfirmDialog()">cancel</button>
</mat-dialog-actions>

父对话框中有以下片段：

  constructor(
    public dialog: MatDialog,
    public parentDialogRef: MatDialogRef<ParentDialogComponent>,

当用户点击父对话框中的保存按钮时弹出确认对话框。子确认对话框在打开时会引用父对话框，以便关闭它。

  openConfirmDialog() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      message: "You have unsaved changes. Are you sure you want to close?"
    });
    dialogRef.afterClosed().subscribe(result => {
      if (result=='true') {
        console.log('result=',result,parentDialogRef=',this.parentDialogRef);
        this.parentDialogRef.close();
      }
    })
  }

console.log 显示了 'true' 的结果和有效的 parentDialogRef，但当用户选择 YES 时父对话框无法关闭。

这是确认对话框.ts 代码：

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.css']
})
export class ConfirmDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public message: string) {
    dialogRef.disableClose = true;
  }
}

我希望此代码是通用的，以便它可以被任何其他组件使用。

建议？

Answer 1

解决方案是查找布尔值 true 而不是字符串 'true'。现在可以了。希望其他人能从中受益 post.

如何根据 Angular 中确认子对话框中选择的答案关闭父对话框？

How to close parent dialog depending on selected answer in confirm child dialog in Angular?

angular-material

angular