Angular父组件触发事件时如何获取子组件内实时更新的绑定对象

结论 #

该需求完全不需要引入FormControl相关类即可实现，以下提供3种常用的原生实现方案，可根据你的业务场景选择： #

方案1：@ViewChild获取子组件实例（最适配当前场景） #

这是最直接的方案，无需改造子组件现有的双向绑定逻辑，仅需在父组件侧新增少量代码即可：

实现步骤 #

• 第一步：确保子组件内的data对象为公共属性，或在子组件内暴露公共的取值方法（更符合封装规范）
  子组件代码示例：

  // 子组件类代码
  export class ChildFormComponent {
    // 直接声明为公共属性（你原有代码默认就是public，无需修改）
    public data = {
      identifier: null,
      isRequired: true,
      title: 'Untitled',
      type: this.fileTypes[0].name,
      description: '',
      // 其他属性
    }
  
    // 可选：封装公共取值方法，避免外部直接修改内部状态
    public getFormData() {
      return {...this.data}; // 可按需做深拷贝
    }
  }
  

• 第二步：父组件模板中给子组件添加模板引用变量

  <!-- 父组件模板 -->
  <app-child-form #childFormRef></app-child-form>
  <button (click)="getChildData()">点击获取子组件数据</button>
  

• 第三步：父组件类中通过@ViewChild获取子组件实例，点击事件中直接取值

  // 父组件类代码
  import { ViewChild } from '@angular/core';
  import { ChildFormComponent } from './child-form.component';
  
  export class ParentComponent {
    @ViewChild('childFormRef') childForm!: ChildFormComponent;
  
    getChildData() {
      // 直接取公共属性
      const childData = this.childForm.data;
      // 或者调用封装的取值方法
      // const childData = this.childForm.getFormData();
      console.log('子组件数据：', childData);
      // 后续业务逻辑
    }
  }
  

注意事项 #

需确保在视图初始化完成（即ngAfterViewInit生命周期触发后）再访问子组件实例，按钮点击属于用户交互事件，默认都在视图渲染完成后触发，无需额外处理时序问题。 #

方案2：服务状态共享（适合多组件共享数据、层级较深的场景） #

如果你的子组件和父组件层级嵌套较深，或有其他组件也需要访问该表单数据，可以用公共服务做状态托管：

• 第一步：定义公共数据服务

  @Injectable({providedIn: 'root'})
  export class FormDataService {
    public formData = {
      identifier: null,
      isRequired: true,
      title: 'Untitled',
      // 其他属性
    }
  }
  

• 第二步：子组件注入服务，直接绑定服务内的属性

  export class ChildFormComponent {
    constructor(public formDataService: FormDataService) {}
  }
  

  子组件模板绑定无需大幅修改，仅调整绑定对象即可：

  <app-text-input [(model)]="formDataService.formData.title" label="Title" type="text" variant="white">
  

• 第三步：父组件注入服务，点击时直接取服务内的数据即可

  export class ParentComponent {
    constructor(public formDataService: FormDataService) {}
  
    getChildData() {
      const childData = this.formDataService.formData;
      // 业务逻辑
    }
  }
  

方案3：@Input+@Output实现双向绑定（适合父组件需要实时同步数据的场景） #

如果父组件需要实时感知子组件数据变化，也可以通过双向绑定实现：

• 子组件定义输入输出：

  export class ChildFormComponent {
    @Input() data: any;
    @Output() dataChange = new EventEmitter<any>();
  
    // 可通过setter或者值变化监听触发事件推送
    ngDoCheck() {
      this.dataChange.emit(this.data);
    }
  }
  

• 父组件模板绑定：

  <app-child-form [(data)]="parentFormData"></app-child-form>
  

  父组件内直接访问parentFormData即可拿到最新的子组件数据。

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