Разница между *ngIf и [ngSwitch] в Angular 2+

В чем разница между [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>

angular angular-ng-if ng-switch
person Manoj Shrestha    schedule 02.01.2019    source источник
comment
codecraft.tv/courses/angular/встроенные-директивы /   -  person RN92    schedule 02.01.2019
comment
аналогично с использованием angular js - stackoverflow.com/questions/16741949/   -  person Tushar Walzade    schedule 02.01.2019

Ответы (3)


arrow_upward
6
arrow_downward

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

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

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

person Yasir Arafat    schedule 02.01.2019

arrow_upward
2
arrow_downward

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

person Gourav Singla    schedule 02.01.2019

arrow_upward
0
arrow_downward

*ngIf работает как оператор if, а ngSwitch (фактически состоящий из двух директив, атрибутивной директивы и структурной директивы) работает как оператор switch в DOM.

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

person Akshay Rajput    schedule 02.01.2019