Angular子组件条件模板切换时ng-content投影失效问题求助

初始组件结构 #

父组件 #

<child-comp>
  <div firstContent>This is my first content</div>
  <div secondContent>This is my second content</div>
</child-comp>

子组件 #

<div redColourDirective> 
  <div>This is the template with directive applied</div>
  <ng-content select="[firstContent]"></ng-content>
  <ng-content select="[secondContent]"></ng-content>
</div>

尝试修改的子组件模板（实现指令条件启用） #

由于无法直接为指令设置条件，改用ngTemplateOutlet切换模板：

<ng-container *ngTemplateOutlet="withDirective() ? tmp1 : tmp2"> </ng-container>
<ng-template #tmp1>
  <div redColourDirective>
    <div>This is the template with directive applied</div>
    <ng-content select="[firstContent]"></ng-content>
    <ng-content select="[secondContent]"></ng-content>
  </div>
</ng-template>
<ng-template #tmp2>
  <div>
    <div>This is the template WITHOUT directive applied</div>
    <ng-content select="[firstContent]"></ng-content>
    <ng-content select="[secondContent]"></ng-content>
  </div>
</ng-template>

其中withDirective()是组件的输入signal。

问题现象 #

• 父组件设置[withDirective]="true"时，firstContent和secondContent能正常投影显示
• 父组件设置[withDirective]="false"时，投影内容完全不显示

<!-- 投影内容正常显示 -->
<child-comp [withDirective]="true">
  <div firstContent>This is my first content</div>
  <div secondContent>This is my second content</div>
</child-comp>

<!-- 投影内容不显示 -->
<child-comp [withDirective]="false">
  <div firstContent>This is my first content</div>
  <div secondContent>This is my second content</div>
</child-comp>

原因及解决方案 #

问题原因 #

Angular的ng-content投影是一次性绑定机制，它只会匹配并渲染到模板中第一个出现对应select选择器的位置。当withDirective()为true时，tmp1里的ng-content会优先被渲染，投影内容会被分配到此处；但切换到tmp2时，对应的ng-content位置无法获取投影内容——因为投影内容已经被第一个ng-content（哪怕未实际渲染）消耗完毕。

解决方案1：复用投影模板 #

将投影内容抽离为单独模板，在两个切换模板中引用：

<!-- 抽离投影内容到独立模板 -->
<ng-template #projectedContent>
  <ng-content select="[firstContent]"></ng-content>
  <ng-content select="[secondContent]"></ng-content>
</ng-template>

<ng-container *ngTemplateOutlet="withDirective() ? tmp1 : tmp2"> </ng-container>

<ng-template #tmp1>
  <div redColourDirective>
    <div>This is the template with directive applied</div>
    <ng-container *ngTemplateOutlet="projectedContent"></ng-container>
  </div>
</ng-template>

<ng-template #tmp2>
  <div>
    <div>This is the template WITHOUT directive applied</div>
    <ng-container *ngTemplateOutlet="projectedContent"></ng-container>
  </div>
</ng-template>

解决方案2：简化模板，直接为指令加条件 #

如果redColourDirective支持输入绑定或为结构型指令，可直接通过条件绑定控制指令启用，避免重复模板：

<ng-container [redColourDirective]="withDirective()">
  <div>
    <div>{{ withDirective() ? 'This is the template with directive applied' : 'This is the template WITHOUT directive applied' }}</div>
    <ng-content select="[firstContent]"></ng-content>
    <ng-content select="[secondContent]"></ng-content>
  </div>
</ng-container>

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