Angular父组件主动触发获取子组件内response.data变量的实现方法

方案1：通过@ViewChild直接获取子组件实例（最简便） #

• 步骤1：在父组件模板中给子组件添加模板引用变量

<app-selectcomp 
  #selectComp
  [plid]="plid" 
  [codeId]="selectedCode" 
  (notify)="getCompFromChild($event)"
></app-selectcomp>

• 步骤2：在父组件逻辑中声明子组件引用

import { ViewChild } from '@angular/core';
// 路径替换为你子组件的实际存放路径
import { AppSelectcompComponent } from './components/app-selectcomp.component';

export class 父组件类名 {
  @ViewChild('selectComp') selectComp!: AppSelectcompComponent;

  // 其余原有逻辑保留
}

• 步骤3：实现按钮点击方法，直接读取子组件属性

getDatainChild() {
  const childData = this.selectComp?.response?.data;
  // 此处直接处理拿到的子组件response.data即可
  console.log(childData);
}

注意：需保证子组件中的response属性为公开属性，否则父组件无法直接访问。

方案2：子组件暴露公开方法返回数据（更规范，耦合度更低） #

• 步骤1：子组件内部新增公开方法，专门返回目标数据

// 子组件类中新增方法
public getResponseData() {
  return this.response?.data;
}

• 步骤2：父组件点击方法中调用子组件的公开方法

getDatainChild() {
  const childData = this.selectComp?.getResponseData();
  // 处理拿到的数据即可
}

该方案的优势是后续子组件内部数据结构调整时，只要同步修改公开方法的实现即可，不需要改动父组件的调用逻辑。

注意事项 #

• @ViewChild获取的子组件实例会在ngAfterViewInit生命周期钩子执行后才完成初始化，你当前是用户点击按钮触发获取，页面已完成渲染，不会出现实例为空的问题。
• 若你使用Angular 8及以上版本，@ViewChild默认配置为{static: false}，可正常获取动态渲染的子组件。

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