如何在不修改内部组件时实现嵌套带选择器的ng-content投影？

我有一个名为app-internal的库组件，它使用带有选择器（此处为h1和h2）的内容投影。现在我想要为该组件创建一个装饰性包装组件PublicComponent，用于将自身接收的内容向下投影到InternalComponent中。但当InternalComponent使用<ng-content select="...">时，该功能无法生效。假设我无法修改app-internal组件，是否仍有办法实现该需求？

核心需求是将PublicComponent接收的内容作为输入传递给InternalComponent。

示例代码：

<!-- internal component: -->
<div class="internal">
  <!-- 这部分能正常工作 -->
  <ng-content></ng-content>

  <ng-content select="h2"></ng-content> <!-- 这部分失效 -->
  <ng-content select="h1"></ng-content> <!-- 这部分失效 -->
</div>

<!-- wrapper component -->
<div class="public">
  WRAPPING START
  <app-internal>
    <ng-content></ng-content>
  </app-internal>
  WRAPPING END
</div>

<!-- 期望的使用方式 -->
<app-public>
  <h1>Hello</h1>
  <h2>there</h2>
</app-public>

Angular的内容投影是一次性的：当app-public接收<h1>和<h2>时，这些内容已经被投影到app-public的<ng-content>中，无法再被app-internal的带选择器的<ng-content>二次匹配。可以通过捕获特定内容并转发的方式解决，无需修改app-internal组件，具体实现如下：

方法一：使用模板引用与ngTemplateOutlet（推荐） #

这种方式能完整保留原始内容的结构、样式和事件绑定，安全性更高。

1. 在PublicComponent类中捕获传入的特定内容模板：

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

@Component({
  selector: 'app-public',
  templateUrl: './public.component.html',
})
export class PublicComponent {
  @ContentChild('h1Template') h1Template?: TemplateRef<any>;
  @ContentChild('h2Template') h2Template?: TemplateRef<any>;
}

2. 修改PublicComponent的模板，将捕获的内容转发给app-internal：

<div class="public">
  WRAPPING START
  <app-internal>
    <!-- 传递默认内容 -->
    <ng-content></ng-content>
    <!-- 转发h1内容到内部组件的对应选择器位置 -->
    <ng-container *ngTemplateOutlet="h1Template"></ng-container>
    <!-- 转发h2内容到内部组件的对应选择器位置 -->
    <ng-container *ngTemplateOutlet="h2Template"></ng-container>
  </app-internal>
  WRAPPING END
</div>

<!-- 捕获传入的h1内容到模板 -->
<ng-template #h1Template>
  <ng-content select="h1"></ng-content>
</ng-template>

<!-- 捕获传入的h2内容到模板 -->
<ng-template #h2Template>
  <ng-content select="h2"></ng-content>
</ng-template>

方法二：使用ContentChild与innerHTML（简单但需注意安全） #

如果内容仅为纯文本或无需保留事件绑定，可以用这种更简洁的方式，但要注意innerHTML可能存在XSS风险，需确保内容安全。

1. 在PublicComponent类中捕获传入的h1和h2元素：

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

@Component({
  selector: 'app-public',
  templateUrl: './public.component.html',
})
export class PublicComponent {
  @ContentChild('h1Content') h1Content?: ElementRef<HTMLHeadingElement>;
  @ContentChild('h2Content') h2Content?: ElementRef<HTMLHeadingElement>;
}

2. 修改PublicComponent的模板：

<div class="public">
  WRAPPING START
  <app-internal>
    <ng-content></ng-content>
    <!-- 渲染h1内容 -->
    <h1 *ngIf="h1Content" [innerHTML]="h1Content.nativeElement.innerHTML"></h1>
    <!-- 渲染h2内容 -->
    <h2 *ngIf="h2Content" [innerHTML]="h2Content.nativeElement.innerHTML"></h2>
  </app-internal>
  WRAPPING END
</div>

<!-- 捕获传入的h1和h2元素 -->
<ng-content select="h1" #h1Content></ng-content>
<ng-content select="h2" #h2Content></ng-content>

验证效果 #

使用期望的方式调用app-public：

<app-public>
  <h1>Hello</h1>
  <h2>there</h2>
</app-public>

此时app-internal的带选择器的<ng-content>将能正确接收到对应的h1和h2内容。

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