Angular中父组件无法通过ViewChild获取子组件实例的问题

一、两种有效解决方法 #

1. 模板引用变量法 #

修改父组件模板，为目标元素添加模板引用变量：

<div class="parent">
  parent >>>
  <p>This my parent having child in it</p>
  <div appChildDom #childRef>
     <ng-content></ng-content>
  </div>
</div>

在父组件中通过引用变量获取子组件：

export class ParentComponent implements AfterViewInit {
  @ViewChild('childRef') vchild: ChildComponent;

  ngAfterViewInit(): void {
    this.vchild?.getContentOfChild();
  }
}

2. 指定read选项法 #

无需修改模板，直接在@ViewChild中明确指定读取的组件类型：

export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent, { read: ChildComponent }) vchild: ChildComponent;

  ngAfterViewInit(): void {
    this.vchild?.getContentOfChild();
  }
}

二、问题原因 #

Angular Ivy编译引擎对组件选择器的查找逻辑与旧视图引擎（Angular 11及之前版本）不同。当组件使用属性选择器（如div[appChildDom]）时，仅通过组件类作为@ViewChild的查询条件，Ivy无法自动关联DOM元素对应的组件实例，必须通过模板引用变量精准定位，或通过read选项明确指定要获取的实例类型。

三、组件定义方式的合理性 #

这种通过属性选择器定义组件的方式是完全合法且符合Angular规范的。Angular支持元素、属性、类等多种选择器类型，属性选择器适合为已有DOM元素附加组件逻辑的场景，是合理的用法。

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