如何在Angular中正确嵌套多个ng-if指令？

你想要的方案完全可以实现！问题出在你在嵌套的ng-template上使用了*ngIf语法糖——*前缀的结构型指令本质是Angular的语法糖，它会自动把当前元素包裹成一个新的ng-template，如果已经在ng-template元素上使用，就会产生逻辑冲突。我们只需要用显式的ngIf指令绑定替代语法糖，就能完美贴合你的原始设计，既不用额外DOM元素，也能避免现有变通方案的缺陷。

修改后的可行代码 #

<div class="container">
  <ng-template *ngIf="booleanA;then caseA else caseB"></ng-template>

  <ng-template #caseA>
    <el>1</el>
    <el>2</el>
  </ng-template>

  <ng-template #caseB>
    <!-- 使用显式的ngIf指令绑定，替代*ngIf语法糖 -->
    <ng-template [ngIf]="booleanB">
      <el>3</el>
      <el>4</el>
      <el>5</el>
    </ng-template>
  </ng-template>
</div>

为什么这个方案有效？ #

*ngIf="booleanB"是Angular的语法糖，它会被编译成以下结构：

<ng-template [ngIf]="booleanB">
  <!-- 原内容 -->
</ng-template>

当你已经在ng-template元素上时，不能再使用*语法糖（因为它会试图再次包裹模板），直接使用[ngIf]指令绑定就可以让ng-template本身成为条件渲染的载体，完全符合你的需求：

• 仅使用Angular的逻辑元素ng-template
• 保留了最初的模板嵌套结构
• 没有添加任何会修改DOM的原生元素（比如额外的div）
• 无需重复检查booleanB或重复编写HTML代码

内容的提问来源于stack exchange，提问作者M. Paviza