Angular中ViewChild获取子组件实例返回undefined问题求助

我明白你遇到的困扰了——你的子组件<app-com2>被放在了ng-template内部，而这个模板是用来渲染模态框内容的。只有当模态框被打开时，模板里的内容才会真正被加载到DOM中，这就导致父组件的初始化阶段（包括ngAfterViewInit钩子执行时），子组件根本还没被创建，所以@ViewChild自然拿不到有效的实例。

下面给你两种可行的解决思路：

方法一：利用模态框的opened事件获取子组件实例 #

当模态框完全打开并完成内容渲染后，我们可以通过模态框的引用去获取子组件实例。修改你的open方法：

open(content: any) {
  const modalRef = this.modalService.open(content, { windowClass: 'temp-modal' });
  // 监听模态框打开完成的事件，此时子组件已渲染
  modalRef.opened.subscribe(() => {
    // 从模态框的content对象中获取子组件引用
    this.traceRef = modalRef.content.traceRef;
  });
}

同时，确保你的@ViewChild声明添加static: false配置（Angular 8及以上版本要求），并导入子组件的类型：

import { Com2Component } from './com2.component';
// ...
@ViewChild('traceRef', { static: false }) traceRef: Com2Component;

这样当你点击savePNG按钮时，this.traceRef就已经是有效的子组件实例了，可以正常调用savePNG()方法。

方法二：直接通过模板变量传递子组件实例（更简洁） #

你可以跳过组件类中的traceRef变量，直接在模板里把子组件引用传给savePNG方法：

修改父组件模板中的下载按钮：

<button type="button" class="btn btn-outline-dark" (click)="savePNG(traceRef)">
  <i class="fa fa-download"></i>PNG
</button>

然后更新savePNG方法，直接接收子组件实例：

savePNG(traceRef: Com2Component) {
  // 先判断实例是否存在，避免报错
  if (traceRef) {
    traceRef.savePNG();
  }
}

这种方式更直接，因为只有当模态框打开后，模板里的traceRef才会存在，点击按钮时直接把实例传入，完全不用担心undefined的问题。

最后补充一点：如果子组件的savePNG方法依赖自身的初始化逻辑，确保这些逻辑在子组件的ngOnInit或ngAfterViewInit钩子中已经执行完成，避免调用时出现异常。

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