Angular 2+中*ngIf和[ngSwitch]的区别

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>

- Manoj Shrestha

---

https://codecraft.tv/courses/angular/built-in-directives/ngif-and-ngswitch/ - RN92

类似AngularJS中的使用- https://dev59.com/5mQn5IYBdhLWcg3wj3vz - Tushar Walzade

Answer 1

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

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

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

- Mohammad Yasir Arafat

Answer 2

ngIf基本上是一个带有单一条件的ngSwitch版本。它与ngShow不同之处在于，它删除实际的DOM元素而不仅仅是隐藏它。如果您使用的是只有一个真值条件检查的ngSwitch，则我认为ngIf将执行相同的操作。

- Gourav Singla

Answer 3

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

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

- Akshay Rajput