如何使用@ContentChild获取投影的header元素？

问题原因 #

你当前使用@ContentChild('header')时，这里的'header'指向的是模板引用变量（即带有#header标识的元素），但你投影的<header>标签并未设置该变量，因此Angular无法匹配到目标元素。

解决思路 #

方案1：添加模板引用变量

在投影的<header>标签上添加#header引用变量，让Angular能够定位到它：

<my-test>
  <header #header>header</header>
  Test
</my-test>

此时你原有的TypeScript代码无需修改，ngAfterContentInit中就能正常打印出该元素。

方案2：通过标签选择器直接获取

如果不想添加模板引用变量，可以通过selector参数指定标签名来获取元素，注意要结合ElementRef访问原生DOM：

import { Component, ContentChild, ElementRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'my-test',
  template: `<ng-content></ng-content>`
})
export class MyTestComponent implements AfterContentInit {
  @ContentChild(ElementRef, { selector: 'header' }) headerRef!: ElementRef<HTMLElement>;

  ngAfterContentInit() {
    console.log(this.headerRef.nativeElement);
  }
}

额外注意事项

• 确保组件未启用ViewEncapsulation.ShadowDom（默认是Emulated，不会影响），否则投影元素会被隔离在Shadow DOM中，可能导致获取失败。
• 若你的Angular版本低于8.x，需要在@ContentChild中显式添加static: false参数（新版本已默认设置）。

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