Angular问题：*ngIf else分支内ng-content无法正常渲染

核心问题 #

你遇到的是Angular内容投影的规则限制：同一个选择器的<ng-content>只能投影一次内容。

你的代码里，lowOpacity和highOpacity两个模板里都写了<ng-content select=".popup-content">，Angular在组件初始化时会先扫描所有<ng-content>，把匹配到的父组件传入的.popup-content内容分配给第一个遇到的<ng-content>（哪怕这个模板当时没被渲染）。等触发else分支渲染highOpacity时，对应的<ng-content>已经没有内容可以投影了，所以就显示不出来——而纯文本能显示，是因为它不属于内容投影的范畴，不受这个规则影响。

两种解决方案 #

方案1：简化结构，只用一个<ng-content>

直接通过条件绑定类名，不用拆分两个模板，这样只保留一个<ng-content>，自然不会有内容被提前消耗的问题：

<!-- 直接在div上绑定动态类 -->
<div [ngClass]="(id == 'login-popup' || id == 'language-popup') ? 'content' : 'content-solid-bkgd'">
  <ng-content select=".popup-content"></ng-content>
</div>

如果逻辑复杂，也可以在组件里写个方法返回类名：

// 组件.ts文件
getPopupClass(): string {
  return (this.id === 'login-popup' || this.id === 'language-popup') 
    ? 'content' 
    : 'content-solid-bkgd';
}

然后HTML里调用：

<div [ngClass]="getPopupClass()">
  <ng-content select=".popup-content"></ng-content>
</div>

方案2：用模板变量复用内容（保留then/else结构）

如果一定要保留原有的then/else模板结构，需要先把要投影的内容捕获到一个模板变量里，再在两个分支里用*ngTemplateOutlet复用：

<!-- 先把要投影的内容存到模板变量里 -->
<ng-template #popupContent>
  <ng-content select=".popup-content"></ng-content>
</ng-template>

<!-- 原有的ngIf逻辑不变 -->
<div *ngIf="id == 'login-popup' || id == 'language-popup'; then lowOpacity; else highOpacity;"></div>

<ng-template #lowOpacity>
  <div class="content">
    <!-- 复用模板变量里的内容 -->
    <ng-container *ngTemplateOutlet="popupContent"></ng-container>
  </div>
</ng-template>
<ng-template #highOpacity>
  <div class="content-solid-bkgd">
    <!-- 复用模板变量里的内容 -->
    <ng-container *ngTemplateOutlet="popupContent"></ng-container>
  </div>
</ng-template>

这样不管哪个分支渲染，都是复用同一个模板变量里的内容，不会出现内容被提前消耗的问题。

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