在 Angular 2+ 中 *ngIf 与 [ngSwitch] 之间的区别

Question

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

*如果

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

[ng开关]

<ng-container [ngSwitch]="day">
     <div *ngSwitchCase="'MONDAY'">
         Keep calm and pretend it's not Monday.
     </div>
     ...
     <div *ngSwitchCase="'FRIDAY'">
         Happy Friday!
     </div>
</ng-container>

Answer 1

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

对于[ngSwitch]，只会执行特定案例中的代码（使用 break;）。

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

Answer 2

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

Answer 3

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

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