Angular ng-content内容投影仅支持根层级元素选择？技术咨询

在使用Angular的ng-content做内容投影时，会遇到这样的情况：只有根层级的元素能被select选择器匹配到，嵌套在其他元素内部的元素无法被选中。

问题复现代码 #

根组件代码

<app-wrapper>
  <div class="root">Test1</div>
  <div>
    <div class="sub">Test2</div>
  </div>
</app-wrapper>

可正常生效的子组件代码（选中根层级元素）

<ng-content select=".root"></ng-content>

无法生效的子组件代码（选中嵌套元素）

<ng-content select=".sub"></ng-content>

原因说明 #

Angular的ng-content的select选择器仅会匹配投影内容的根节点，不会递归查找嵌套层级的元素。也就是说，只有直接放在组件标签（<app-wrapper>）下的元素才会进入匹配范围，嵌套在其他容器内的元素不在ng-content的直接匹配目标里。

解决方法 #

方法1：调整内容结构（最简单）

如果业务允许，直接把需要投影的嵌套元素提到根层级：

<app-wrapper>
  <div class="root">Test1</div>
  <div class="sub">Test2</div>
</app-wrapper>

这样原有的<ng-content select=".sub"></ng-content>就能正常生效。

方法2：使用模板传递嵌套内容（更灵活）

当无法调整原有结构时，可以通过ng-template包裹嵌套内容，在子组件中通过模板引用来渲染：

父组件代码

<app-wrapper>
  <div class="root">Test1</div>
  <ng-template #subTemplate>
    <div class="sub">Test2</div>
  </ng-template>
</app-wrapper>

子组件TS代码

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

@Component({
  selector: 'app-wrapper',
  templateUrl: './wrapper.component.html'
})
export class WrapperComponent {
  @ContentChild('subTemplate') subTemplate!: TemplateRef<any>;
}

子组件HTML代码

<ng-content select=".root"></ng-content>
<!-- 渲染嵌套的模板内容 -->
<ng-container *ngTemplateOutlet="subTemplate"></ng-container>

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