Angular中使用MatDialog实现子对话框向父组件传数据

你的问题出在错误使用了EventEmitter——MatDialog动态创建的子组件，父组件无法直接绑定其EventEmitter事件。正确的做法是利用Angular Material提供的MatDialogRef来传递数据，具体修正步骤如下：

步骤1：修改子对话框组件（EditChannelFieldsComponent） #

注入MatDialogRef，移除自定义的EventEmitter，在保存方法中通过close()传递表单数据：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
// 导入MatDialogRef
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-edit-channel-fields',
  templateUrl: './edit-channel-fields.component.html',
  styleUrls: ['./edit-channel-fields.component.css']
})
export class EditChannelFieldsComponent implements OnInit {
  form: FormGroup;

  // 注入MatDialogRef
  constructor(private dialogRef: MatDialogRef<EditChannelFieldsComponent>) { }

  ngOnInit() {
    this.initializeFormAndItsFields();
  }

  initializeFormAndItsFields() {
    this.form = new FormGroup({
      name: new FormControl(null, { validators: [Validators.required] }),
      description: new FormControl(null, { validators: [Validators.required] }),
    });
  }

  onSaveChannelFields() {
    if (this.form.valid) {
      // 通过close方法传递表单数据给父组件
      this.dialogRef.close(this.form.value);
    }
  }
}

步骤2：修改父组件，订阅对话框关闭事件 #

打开对话框后，通过afterClosed()订阅子组件传回的数据：

openDialog(){
  console.log('openDialog');
  const dialogRef = this.dialog.open(EditChannelFieldsComponent, {
    width:'50%',
    data: "right click"
  });

  // 订阅对话框关闭事件，接收传回的数据
  dialogRef.afterClosed().subscribe(result => {
    if (result) {
      console.log('从对话框传回的数据:', result);
      // 这里处理传回的数据，比如更新父组件数据
    }
  });
}

为什么原来的方法不生效？ #

EventEmitter需要父组件在模板中直接引用子组件（比如<app-edit-channel-fields (onSubmitReason)="handleEvent($event)"></app-edit-channel-fields>）才能绑定事件，但MatDialog是动态创建组件，父组件模板中并没有直接引用，所以自定义的EventEmitter无法被父组件监听。而MatDialogRef是Angular Material专门为对话框提供的通信机制，能可靠地完成父子组件间的数据传递。

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