Angular 4中如何从Mat Dialog同时传递确认信息与数据至父组件

完全可以同时传递'Confirm'标识和data数据，Angular Material的Dialog组件支持通过close()方法传递任意类型的数据，包括组合了多个值的对象。你只需要把这两个值打包成一个对象传递就行，具体步骤如下：

1. 修改Dialog组件的关闭方法 #

把'Confirm'和data封装成一个对象，作为close()方法的参数：

onCloseConfirm(data) {
  // 用对象包装动作标识和数据
  this.thisDialogRef.close({
    action: 'Confirm',
    payload: data
  });
  console.log("conf data", data);
}

2. 在父组件中接收组合数据 #

订阅afterClosed()时，直接解构这个对象就能拿到两个值：

dialogRef.afterClosed().subscribe(result => {
  // 先判断是否有结果（比如用户点击取消按钮可能返回null）
  if (result) {
    console.log(`Dialog action: ${result.action}`); // 输出 'Confirm'
    console.log(`Dialog data:`, result.payload); // 输出传入的data
  }
});

这种方式的好处不仅能同时传递多个数据，还能让后续扩展更灵活——比如如果以后需要区分“确认”“取消”“删除”等不同动作，只需要修改action字段的值就行，不用改传递数据的结构。

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