Angular 10 如何实现两次显示组件的投影内容ng-content

• 单次投影约束：<ng-content>是内容投影的一次性锚点，同一组宿主投影内容只会被填充到第一个匹配选择器的<ng-content>位置，后续同选择器的锚点不会接收到内容，这是Angular内容投影的原生设计逻辑，不支持重复填充。
• 模板封装失效原因：将<ng-content>包裹在<ng-template>中无法实现复用，是因为<ng-content>的解析时机是组件初始化的早期阶段，投影动作会在视图构建初期一次性完成；而放在ng-template内的内容不会在初始化阶段被扫描，因此里面的ng-content永远无法获取到宿主投影的内容。
• 装饰器获取的常见误区：之前尝试用@ContentChild获取投影内容失效，本质是因为目标是嵌套在投影子节点内部的组件，而非直接投影进组件的顶层引用；只要投影内容是顶层的ng-template实例，@ContentChild就可以正常捕获到对应的引用，不需要穿透DOM层级。
• DOM操作的反模式问题：直接通过DOM接口复制/移动投影节点，会破坏Angular的视图树关联，导致变更检测、事件绑定、组件生命周期断裂，不属于官方推荐的实现路径。

Angular原生支持可复用投影的核心机制是：将投影内容从“直接DOM节点”转换为“ng-template模板引用”，通过ngTemplateOutlet实现多次渲染，这套机制完全遵循Angular的视图构建规则，不需要手动操作DOM。
具体实现步骤：

1. 调整宿主组件的投影写法，将需要重复展示的内容包裹在ng-template中，声明模板引用：

   <app-awesome>
     <!-- 声明可复用的投影模板，绑定卡片数据的局部上下文 -->
     <ng-template #cardTemplate let-card="card">
       <app-awesome-card>
         <h1>{{card.title}}</h1>
         <img [src]="card.thumbnail">
       </app-awesome-card>
     </ng-template>
   </app-awesome>
   

2. 在app-awesome组件内部，通过@ContentChild获取投影传入的模板引用：

   import { Component, ContentChild, TemplateRef } from '@angular/core';
   
   @Component({
     selector: 'app-awesome',
     templateUrl: './awesome.component.html'
   })
   export class AwesomeComponent {
     // 捕获宿主投影的模板实例
     @ContentChild('cardTemplate') cardTemplateRef!: TemplateRef<{ card: any }>;
     // 组件内部维护的卡片数据源
     cards = [/* 自定义卡片数据 */];
   }
   

3. 在组件模板的两个独立容器中，通过ngTemplateOutlet重复调用同一个模板，传入对应渲染上下文：

   <div class="awesome-class">
     <ng-container *ngFor="let card of cards">
       <ng-container 
         *ngTemplateOutlet="cardTemplateRef; context: { card: card }">
       </ng-container>
     </ng-container>
   </div>
   
   <div class="more-awesome-class">
     <ng-container *ngFor="let card of cards">
       <ng-container 
         *ngTemplateOutlet="cardTemplateRef; context: { card: card }">
       </ng-container>
     </ng-container>
   </div>
   

这种实现方式下，两次渲染的UI节点都是独立的Angular视图实例，所有数据绑定、事件监听、组件生命周期都和普通渲染的节点保持一致，不会出现手动操作DOM带来的视图结构错乱问题。

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