ngClass 和 class 绑定有什么区别？答案

【问题标题】：what is difference between ngClass and clas binding?ngClass 和 class 绑定有什么区别？
【发布时间】：2021-03-22 11:16:49
【问题描述】：

ngClass 和 clas 绑定有什么区别？

两者都接受相同的语法。我看到的唯一区别是类可以这样做：[class.sale]="onSale"。

两者都接受几乎相似的语法：

[ngClass]="stringExp|arrayExp|objExp"

[class]="string | Record<string, boolean | undefined | null> | Array<string>"

我已经阅读了一些关于 SO 的答案。但他们是几年前的事了。我认为现在 Angular 团队已经让这两种表达方式相似。

有人可以确认吗？

【问题讨论】：

使用[ngClass] 有条件地应用多个类，使用[class.sale] 有条件地应用特定类。在这种情况下，它是类 sale 的 CSS 选择器。
你能举例说明吗？
@mx-Code，ngClass 允许，例如[ngClass]="{'myclass1':condition, 'mayclass2':condition2}" or [ngClass]="condition?'class1':'class2' or [ngClass]="variable_with_classname", [class.sale]="variable"only 允许如果变量（或条件）添加类，如果不是变量则不添加类。

标签： angular

【解决方案1】：

为了扩展 Michael D 的答案，这是单类与多类的情况。

使用class 绑定允许您一次添加或删除一个类，如您的问题所示：

[class.sale]="onSale"
[class.error]="errors.length > 1"

另一方面，ngClass 允许您通过单个调用添加或删除多个类，如下所示：

[ngclass]="{'sale': onSale, 'error': errors.length > 1}"

样式类显示在左侧，您的表达式显示在右侧。

编辑

我认为可能还值得注意的是，您还可以将类作为您在组件中定义的对象传递。例如，您的组件中可能有以下内容：

classes = {
    'sale': onSale,
    'error': errors.length > 1
}

然后您可以像这样传递给[ngclass] 绑定：

[ngClass]="classes"

【讨论】：

看看这一切在课堂上也是可能的吧？您可以传递具有多个条目的对象、具有不同样式的字符串、数组等。
AFAIK，没有。类绑定只允许您一次操作一个类。我通常认为ngClass 是更好的选择，因为如果您需要开始在给定元素上切换多种不同的样式，则不必更改语法。
在文档中：angular.io/guide/attribute-binding。请参阅部分类绑定，您可以在其中传递对象{foo: true, bar: false} Aint 可以在此处绑定多个类。或作为字符串'class1 class2 class3' && true || def-class
如果您使用[class] 没有后缀类名，从外观上看，您可以以相同的方式使用它。我不能说我见过这种用法。这可能是一个新的实现。
这样的事情也可以{{class1 ? cond1 : class2}} {{class3 ? cond2 : class4}} ...

【解决方案2】：

从 Angular 官方文档中，你可以阅读到：

语法[class]，以便使用Attribute, class, and style bindings绑定类

关于效果 [class.className]='booleanVariable'

和[ngClass]="booleanVariable ? 'className' : ''"一样

在这两种情况下，您都可以根据条件应用 css。

【讨论】：