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

标签 angular angular-ng-if ng-switch

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

最佳答案

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

对于[ngSwitch],只会执行特定情况下的代码(使用break;)。

因此,[ngSwitch] 在存在多个 case 的情况下会更快。

关于angular - Angular 2+ 中 *ngIf 与 [ngSwitch] 之间的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54000683/

相关文章:

javascript - 是否可以将 ng-switch-when 属性放在多个元素上?

angularjs - gulp-minify-html 删除空的 HTML 属性,导致 Angular 应用出现问题

angular - NullInjectorError : No provider for InjectionToken angularfire2. 应用程序选项

angular - 使用 Jasmine 在 Angular 8 中测试异步代码时如何等待?

angular - node_modules/@angular/common/common "' has no exported member ' ViewportScroller'

angular - 想要根据 Angular 中的条件加载父组件后访问子组件对象

javascript - 函数未在 HTMLButtonElement.onclick Angular 4 中定义

javascript - 无法获取 ng-if 包装的输入值

javascript - ng-if on ng-repeat 调用函数

angular - 如何在 Angular 数据类型上使用 ngSwitch?