Question

[ngSwitch]和一堆*ngIf之间有什么区别。我们应该关注任何性能因素吗？

* 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>

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

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

3 个答案: