7
votes

Différent entre * ngIf et [ngSwitch] dans Angular 2+

Quelles sont les différences entre [ngSwitch] et un groupe de * ngIf . Y a-t-il des facteurs de performance qui devraient nous préoccuper?

* ngIf

<ng-container [ngSwitch]="day">

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

</ng-container>

[ngSwitch]

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

angular angular-ng-if ng-switch

2 commentaires

codecraft.tv/courses/angular/built-in-directives /…

similaire en utilisant angular js - stackoverflow.com/questions/16741949/…

3 Réponses :

2
votes

ngIf est essentiellement une version de ngSwitch avec une seule condition. Il est différent de ngShow en ce qu'il supprime l'élément DOM réel plutôt que de simplement le cacher. Si vous utilisez un ngSwitch avec une seule vérification de la condition de vérité, alors je pense que ngIf fera la même chose.

0 commentaires

0
votes

* ngIf fonctionne comme l'instruction if et ngSwitch (en fait composé de deux directives, une directive d'attribut et une directive structurelle) fonctionnent comme une instruction switch dans le DOM.

Connaître la différence entre l'instruction if-else et les cas de commutation vous aidera à mieux comprendre, https://techdifferences.com/difference-between-if-else- and-switch.html

0 commentaires

4
votes

Pour * ngIf , chaque condition sera vérifiée et le code à l'intérieur de la condition true sera exécuté.

Pour [ngSwitch] , seul le code à l'intérieur du cas spécifique sera exécuté (en utilisant break; ).

Ainsi, [ngSwitch] sera plus rapide là où il y a plusieurs cas.

0 commentaires