Angular中MatDialog打开的组件无法用EventEmitter传值如何解决

问题核心原因 #

你在父组件模板中写的<app-edit-email-cali (caliConfirmationEmail)="trySave($event)"></app-edit-email-cali>和你通过MatDialog.open动态创建的EditEmailCaliComponent是两个完全独立的组件实例：你绑定的事件只对应模板里静态声明的那个未使用的实例，弹窗触发的EventEmitter没有对应的监听逻辑，所以收不到值。

推荐解决方案（Angular Material Dialog 标准传值方式） #

直接通过MatDialogRef在关闭弹窗时传递返回值，不需要使用EventEmitter：

第一步：修改子组件EditEmailCaliComponent的保存逻辑 #

把原有的emit逻辑替换为调用dialogRef.close并传入邮箱值：

export class EditEmailCaliComponent {
  form: FormGroup = new FormGroup({
    emailAddress: new FormControl(''),
  });

  constructor(public dialogRef: MatDialogRef<EditEmailCaliComponent>, @Inject(MAT_DIALOG_DATA) public data: boolean) {}

  saveEmail(){
    const emailValue = this.form.controls.emailAddress.value;
    this.dialogRef.close(emailValue);
    console.log('email is ' + emailValue);
  }
}

第二步：父组件监听弹窗关闭事件获取返回值 #

修改CaliDialogComponent中editEmail方法的订阅逻辑，同时修正错误的trySave方法：

editEmail(element: string): void {
  const dialogRef = this.dialog.open(EditEmailCaliComponent, {
    width: '250px',
  });

  dialogRef.componentInstance.form.patchValue({
    emailAddress: element,
  });

  dialogRef.afterClosed().subscribe(result => {
    // result就是弹窗关闭时返回的邮箱值
    if (result !== element && result !== undefined && result !== '') {
      this.trySave(result);
      // 原有更新数据库的逻辑可以直接放在这里执行
      // this.userService.updateEmail(element, result).subscribe(() => {
      //   this.loadEmail();
      // });
    }
  });
}

// 修正trySave方法的参数使用逻辑
trySave(email: string): void{
  console.log('email is ' + email);
}

第三步：清理冗余代码 #

删除父组件模板中无用的静态<app-edit-email-cali>标签，避免后续产生混淆。

可选方案（保留EventEmitter的实现方式） #

如果你一定要使用EventEmitter，也可以在创建弹窗后手动订阅子组件的输出事件：

editEmail(element: string): void {
  const dialogRef = this.dialog.open(EditEmailCaliComponent, {
    width: '250px',
  });

  dialogRef.componentInstance.form.patchValue({
    emailAddress: element,
  });

  // 手动订阅子组件的Output事件
  dialogRef.componentInstance.email.subscribe((emailVal) => {
    this.trySave(emailVal);
  });

  // 原有afterClosed逻辑保留即可
}

内容的提问来源于stack exchange，提问作者Kass224