Angular中通过ng-template向多个带select属性的ng-content传递内容失效问题求助

你的问题核心在于内容投影（ng-content）是静态的，在组件初始化阶段就完成内容收集，而ngTemplateOutlet是动态渲染内容，这时候投影已经结束，所以带select属性的ng-content无法捕获到动态渲染的内容。下面给你两种可行的解决方案：

方案一：直接静态投影（适合不需要复用模板的场景） #

如果不需要复用模板内容，直接把带属性的元素放在子组件标签内部即可，不需要通过ng-template包裹：

子组件模板（child.component.html） #

<ng-content select="[first]"></ng-content>
<h3>seperator</h3>
<ng-content select="[second]"></ng-content>

父组件模板（app.component.html） #

<child>
  <h3 first> First </h3>
  <h3 second> Second </h3>
</child>

这种方式是Angular内容投影的标准用法，能正常把带first和second属性的元素分别投影到对应的位置。

方案二：通过@Input传递TemplateRef（适合需要复用模板的场景） #

如果需要复用模板内容，我们可以换一种思路：子组件接收两个模板引用，然后在对应位置用ngTemplateOutlet渲染，替代ng-content的静态投影。

子组件代码（child.component.ts） #

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

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  // 接收第一个区域的模板
  @Input() firstTemplate: TemplateRef<any> | null = null;
  // 接收第二个区域的模板
  @Input() secondTemplate: TemplateRef<any> | null = null;
}

子组件模板（child.component.html） #

<!-- 渲染第一个模板内容 -->
<ng-container *ngTemplateOutlet="firstTemplate"></ng-container>
<h3>seperator</h3>
<!-- 渲染第二个模板内容 -->
<ng-container *ngTemplateOutlet="secondTemplate"></ng-container>

父组件模板（app.component.html） #

<!-- 传递两个模板引用给子组件 -->
<child [firstTemplate]="firstTpl" [secondTemplate]="secondTpl"></child>

<!-- 定义可复用的模板 -->
<ng-template #firstTpl>
  <h3> First </h3>
</ng-template>
<ng-template #secondTpl>
  <h3> Second </h3>
</ng-template>

这种方式完全基于动态模板渲染，既能复用模板内容，又能精准控制每个区域的渲染位置，完美解决你遇到的问题。

如果你想把两个模板合并成一个（比如你的原代码里的单个template），也可以在父组件的模板里拆分内容，或者在子组件里通过ContentChildren捕获模板内的元素，但这种方式相对复杂，上面的方案二已经能满足绝大多数复用场景了。

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