嵌套组件中使用@ContentChild获取内容子组件返回undefined问题

云原生阿岚

2026-8-26

解决思路

1. 问题本质：内容投影的层级限制

visual-comp是先投影到placeholder的<ng-content>，再由placeholder中转投影到renderer的<ng-content>。默认情况下，@ContentChild只会查找当前组件直接投影进来的一级子组件，因此renderer无法直接获取到深层的visual-comp。

2. 方案一：开启后代查询

修改RendererComponent中的@ContentChild装饰器，添加descendants: true配置，让Angular递归查找所有后代中的目标组件：

@Component(...)
export class RendererComponent implements AfterContentInit {
  // 开启后代查询
  @ContentChild(VisualCompComponent, { descendants: true }) public _visualCmp!: VisualCompComponent;

  ngAfterContentInit(): void {
    console.log('Visual Component', this._visualCmp);
  }
}

注：Angular 8+ 版本中descendants默认值为false，必须显式设置为true才能生效。

3. 方案二：通过父组件传递引用

利用placeholder能正常获取visual-comp的特性，通过输入属性把引用传递给renderer：

在placeholder.component.ts中获取引用：

@ContentChild(VisualCompComponent) visualCmp!: VisualCompComponent;

修改placeholder.component.html，传递引用：

<renderer [visualCmp]="visualCmp">
  <ng-content></ng-content>
</renderer>

在renderer.component.ts中接收输入：

@Component(...)
export class RendererComponent implements AfterContentInit {
  @Input() visualCmp!: VisualCompComponent;

  ngAfterContentInit(): void {
    console.log('Visual Component', this.visualCmp);
  }
}