如何在Angular 10中实现Vue的v-if/v-else-if链式条件渲染功能

之前使用ngSwitch出现渲染异常的核心原因 #

ngSwitch的匹配规则是无中断的全量匹配：只要*ngSwitchCase绑定的值和外层[ngSwitch]的绑定值严格相等，对应的分支就会被全部渲染，不存在“命中第一个分支就终止后续判断”的机制。
之前的写法把外层ngSwitch硬绑定为true，两个*ngSwitchCase的返回值都是true，自然两个分支会同时渲染，和需要的“按顺序判断、命中第一个满足条件的分支即停止、全不满足走兜底”的逻辑不匹配。 #

两种无需自定义指令的实现方案 #

方案1：链式嵌套*ngIf（行为完全对齐Vue多分支逻辑） #

*ngIf支持通过ng-template的模板引用实现任意层级的链式判断，不需要额外封装自定义指令，就能完全复刻Vuev-if/v-else-if/v-else的执行逻辑：

<div *ngIf="condition1; else condition2Tpl">
  Condition1 is true
</div>
<!-- condition1不满足时才会加载这个模板进行第二层判断 -->
<ng-template #condition2Tpl>
  <div *ngIf="condition2; else condition3Tpl">
    Condition2 is true
  </div>
  <!-- condition2不满足时才会加载这个模板进行第三层判断 -->
  <ng-template #condition3Tpl>
    <div *ngIf="condition3; else defaultTpl">
      Condition3 is true
    </div>
  </ng-template>
</ng-template>
<!-- 所有条件都不满足时加载的兜底分支 -->
<ng-template #defaultTpl>
  <div>All of the above conditions are false</div>
</ng-template>

这种写法的执行顺序和Vue的多分支逻辑完全一致：先判断最高优先级的condition1，满足就直接渲染对应内容、不再执行后续判断；不满足才会进入下一层的condition2判断，以此类推。

方案2：基于计算属性修正ngSwitch写法 #

ngSwitch的设计初衷是匹配同一个表达式的多个离散值，不适合直接在模板里编写多个独立的布尔判断。如果要沿用ngSwitch实现多分支，需要把“按优先级返回第一个命中条件”的逻辑放在组件类的计算属性（getter）中完成：

• 先在组件类中定义带优先级判断的getter：

// 按优先级返回第一个命中的分支标识
get currentMatchedCase(): number {
  if (this.condition1) return 1;
  if (this.condition2) return 2;
  if (this.condition3) return 3;
  return 0;
}

• 模板中把ngSwitch绑定到这个getter上：

<ng-container [ngSwitch]="currentMatchedCase">
  <div *ngSwitchCase="1">Condition1 is true</div>
  <div *ngSwitchCase="2">Condition2 is true</div>
  <div *ngSwitchCase="3">Condition3 is true</div>
  <div *ngSwitchDefault>All of the above conditions are false</div>
</ng-container>

因为getter的判断是按优先级顺序返回的，永远只会返回第一个满足条件的分支标识，不会出现多分支同时渲染的问题。 #

内容的提问来源于stack exchange，提问作者Rahul R Badenkal