通过ngProjectAs传递<ng-content>时@ContentChild无法获取组件

这个问题确实与Angular中ngProjectAs配合@ContentChild查询组件实例的已知问题直接相关。

问题核心原因 #

当通过ngProjectAs将内容跨组件投影到目标插槽时，Angular的内容查询机制（@ContentChild/@ContentChildren）无法自动识别这种“间接投影”的组件实例：

• LayoutComponent中的@ContentChild(HeaderComponent)只会查询直接嵌套在自身内容模板中的HeaderComponent实例
• 你通过NestedLayoutComponent用ngProjectAs传递的app-header，本质是属于NestedLayoutComponent的内容，只是被定向投影到LayoutComponent的插槽里，LayoutComponent的内容查询无法穿透这个投影边界获取到该实例，因此返回undefined。

可行解决方向 #

• 在NestedLayoutComponent中先通过@ContentChild(HeaderComponent)获取实例，再通过输入属性或共享服务传递给LayoutComponent
• 自定义投影指令（而非依赖组件选择器）标记插槽，在LayoutComponent中通过查询该指令来关联投影内容的实例

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