Angular 2+ 中 *ngIf 与 [ngSwitch] 的区别答案

【问题标题】：Different between *ngIf vs [ngSwitch] in Angular 2+Angular 2+ 中 *ngIf 与 [ngSwitch] 的区别
【发布时间】：2019-05-28 18:24:51
【问题描述】：

[ngSwitch]和一堆*ngIfs有什么区别。我们应该关注哪些性能因素？

*ngIf

  <div *ngIf="day === 'MONDAY'">
     Keep calm and pretend it's not Monday.
  </div>
  ...
  <div *ngIf="day === 'FRIDAY'">
     Happy Friday!
  </div>

[ngSwitch]

<ng-container [ngSwitch]="day">

     <div *ngSwitchCase="'MONDAY'">
         Keep calm and pretend it's not Monday.
     </div>
     ...
     <div *ngSwitchCase="'FRIDAY'">
         Happy Friday!
     </div>

</ng-container>

【问题讨论】：

codecraft.tv/courses/angular/built-in-directives/…
类似使用 Angular js - stackoverflow.com/questions/16741949/…

标签： angular angular-ng-if ng-switch

【解决方案1】：

对于*ngIf，将检查每个条件并执行true 条件内的代码。

对于[ngSwitch]，只会执行特定情况下的代码（使用break;）。

所以，[ngSwitch] 在有多个案例的情况下会更快。

【讨论】：

【解决方案2】：

ngIf 基本上是具有单个条件的 ngSwitch 版本。它与 ngShow 的不同之处在于它删除了实际的 DOM 元素，而不是简单地隐藏它。如果您使用的 ngSwitch 只进行了单真条件检查，那么我相信 ngIf 会做同样的事情。

【讨论】：

【解决方案3】：

*ngIf 的工作方式类似于 if 语句和 ngSwitch（实际上由两个指令组成，一个属性指令和一个结构指令）在 DOM 中用作 switch 语句。

了解 if-else 语句和 switch case 之间的区别将有助于您进一步理解， https://techdifferences.com/difference-between-if-else-and-switch.html

【讨论】：