Отличается между * ngIf против [ngSwitch] в Angular 2+

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 (фактически состоящий из двух директив, директивы атрибута и структурной директивы) работают как оператор switch в DOM.

Знание различий между оператором if-else и случаями переключения поможет вам лучше понять, https://techdifferences.com/difference-between-if-else-and-switch.html

Answer 2

Для *ngIf будут проверены все условия и будет выполнен код внутри условия true.

Для [ngSwitch] будет выполняться только код внутри конкретного случая (с использованием break;).

Таким образом, [ngSwitch] будет быстрее при наличии нескольких случаев.

Answer 3

ngIf - это в основном версия ngSwitch с одним условием. Он отличается от ngShow тем, что удаляет фактический элемент DOM, а не просто скрывает его. Если вы используете ngSwitch только с проверкой состояния, то я верю, что ngIf сделает то же самое.