时间戳

首页 > 解决方案 > Angular 4 中 [ngClass]="computeClass()" 和 class="{{computeClass()}}" 之间的区别

angular - Angular 4 中 [ngClass]="computeClass()" 和 class="{{computeClass()}}" 之间的区别

问题描述

在Angular 4中使用ngClass计算类和使用HTML类属性直接计算类有什么区别。

[ngClass]="computeClass()"

和

class="{{computeClass()}}"

computeClass() {
  if (condition) {
    return 'class-a';
  } else {
    return 'class-b';
  }
}

两者都返回相同的结果。这对性能有何影响？

编辑：我的问题与标记为重复的问题不同，因为它比较 [ngClass] 和 [class] 而上面的比较是在 [ngClass] 和 class 之间进行的。

标签： angularng-class

解决方案

看看ngClass 这里的文档。

从角度文档：

CSS 类更新如下，具体取决于表达式评估的类型：

string - the CSS classes listed in the string (space delimited) are added,
Array - the CSS classes declared as Array elements are added,
Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are

删除。

如您所见ngClass，需要不同类型的参数。如果你只是传递一个字符串，这个 css 类将附加到 HTML 元素。使用插值时的方式相同（如 Shashikant Devani 所述）。

但是ngClass可以做的更多。如果您在示例中传递一个对象，您可以有条件地添加多个 css 类。

如果我们将其应用于您的示例，它的工作原理如下：

computeClass() {
  return {
     "class-a": condition,
     "class-b": !condition
  };
}

这是一个普通的 javascript 对象。classA仅当为 true 时才会添加conditionA，并且同样适用于classB. 如果您想了解有关ngClass查看文档的可能性的更多信息。

推荐阅读