Angular父组件提交时如何获取子组件的更新值？

核心逻辑很简单：让父组件始终维护唯一的可信数据源，子组件的所有修改通过Output实时同步到这个数据源里，提交时直接用父组件里的数据源即可，完全不需要去子组件取值。

具体实现步骤 #

• 父组件初始化并持有原始数据对象，传递给子组件时传入深拷贝的副本（避免子组件不小心修改原始数据，比如用structuredClone或者手动复制属性）
• 子组件内部修改副本的属性后，通过Output事件把修改后的属性片段或者完整副本发送给父组件
• 父组件监听子组件的Output事件，更新自身的数据源对象（注意因为用了OnPush策略，必须创建新对象触发变更检测，比如用扩展运算符{...this.data, ...updatedProps}或者Object.assign）

代码示例 #

父组件

@Component({
  selector: 'app-parent',
  template: `
    <app-child-one [data]="childOneData" (dataUpdated)="onChildUpdate($event)"></app-child-one>
    <app-child-two [data]="childTwoData" (dataUpdated)="onChildUpdate($event)"></app-child-two>
    <button (click)="submitForm()">提交</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentComponent {
  originalData = { name: '', age: 0, address: '' };
  // 给子组件传深拷贝的副本
  childOneData = structuredClone(this.originalData);
  childTwoData = structuredClone(this.originalData);

  onChildUpdate(updatedProps: Partial<typeof this.originalData>) {
    // 更新原始数据源，创建新对象触发OnPush变更
    this.originalData = { ...this.originalData, ...updatedProps };
    // 同步更新所有子组件的副本，保证子组件间数据一致
    this.childOneData = { ...this.childOneData, ...updatedProps };
    this.childTwoData = { ...this.childTwoData, ...updatedProps };
  }

  submitForm() {
    // 直接用父组件维护的originalData即可，已经是最新的
    console.log('提交数据:', this.originalData);
    // 后续提交接口逻辑...
  }
}

子组件（以ChildOne为例）

@Component({
  selector: 'app-child-one',
  template: `
    <input [(ngModel)]="localData.name" (ngModelChange)="emitUpdate()">
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildOneComponent {
  @Input() data!: { name: string; age: number; address: string };
  @Output() dataUpdated = new EventEmitter<Partial<typeof this.data>>();
  // 子组件内部维护副本引用
  localData!: typeof this.data;

  ngOnInit() {
    // 初始化时创建副本
    this.localData = structuredClone(this.data);
  }

  emitUpdate() {
    // 只发送修改的属性，减少不必要的数据传输
    this.dataUpdated.emit({ name: this.localData.name });
  }
}

为什么不用额外输入告知子组件更新父组件 #

这种方式会搞反单向数据流：子组件的职责应该是接收输入、处理自身表单逻辑、通知外部更新，父组件才是数据源的管理者。反过来让父组件通知子组件，会增加组件间耦合度，也不符合Angular单向数据流的最佳实践。

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