[ngClass] 与 [class] 绑定之间的区别答案

【问题标题】：Difference between [ngClass] vs [class] binding[ngClass] 与 [class] 绑定之间的区别
【发布时间】：2018-01-01 10:56:30
【问题描述】：

以下sn-ps在Angular 2中有什么区别：

<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">

【问题讨论】：

值得注意的是，还有一个[className]属性绑定，可以像<div [className]="isDelightful ? 'extra-sparkle'">这样使用。
您不需要用: 完成三元吗？否则使用 && 代替 ?将是有效的

标签： angular single-page-application angular2-directives angular-ng-class

【解决方案1】：

这是特殊的 Angular 绑定语法

<div [class.extra-sparkle]="isDelightful">

这是 Angular 编译器的一部分，您不能按照这种绑定样式构建自定义绑定变体。唯一受支持的是[class.xxx]="..."、[style.xxx]="..." 和[attr.xxx]="..."

ngClass 是一个普通的 Angular 指令，你可以自己构建它

<div [ngClass]="{'extra-sparkle': isDelightful}">

ngClass 更强大。它允许您绑定类字符串、字符串数组或示例中的对象。

【讨论】：

啊，所以在文档中，当它说
时，它绑定了 div 的角色属性，而不是控制器中名为 attr 的对象的角色属性。有道理，谢谢
attr.foo 用于绑定到属性而不是属性。见stackoverflow.com/questions/6003819/…。 @Input() 的 Angular 组件和指令被视为属性。绑定到属性只支持字符串值，属性支持任何类型的值。如果存在用于绑定到属性的匹配名称的@Input()，则该值也将传递给@Input()。如果你绑定到一个元素的原生属性（比如 <label> 中的 for ，那么浏览器有自己的实现如何将值反映到属性。
谢谢，虽然我认为“绑定到属性只支持字符串值，属性支持任何类型的值。”可能是输入错误？
@BenTaliadoros 谢谢，你是对的。它应该是“properties support any kind of value”。
那么，在这种情况下，哪个性能更好？不管你用哪一个？

【解决方案2】：

以上两行代码是针对Angular中的CSSclass绑定。基本上有 2-3 种方法可以将 css 类绑定到角度组件。

您在模板中的括号之间提供一个带有 class.className 的类名称，然后在右侧提供一个表达式，该表达式的计算结果应为真或假，以确定是否应应用该类。也就是下面的 extra-sparkle(key) 是 css 类和isDelightful(value)。

<div [class.extra-sparkle]="isDelightful">

当应该添加多个类 时，NgClass 指令非常方便。 NgClass 应该接收一个对象，其类名作为键和计算结果为真或假的表达式。 extra-sparkle 是键，isDelightful 是值 (boolean)。

<div [ngClass]="{'extra-sparkle': isDelightful}">

现在除了闪闪发光，您还可以让您的div 闪闪发光。

<div [ngClass]="{'extra-sparkle': isDelightful,'extra-glitter':isGlitter}">

或

export class AppComponent {
    isDelightful: boolean = true;
    isGlitter:  boolean = true;
    
    get sparkleGlitter()
    {
        let classes = {
            extra-sparkle: this.isDelightful,
            extra-glitter: this.isGlitter
        };
        return classes;
    }
}

<div [ngClass]='sparkleGlitter'>

对于ngClass，你也可以有条件三元运算符。

【讨论】：

【解决方案3】：

使用[ngClass]，您可以以非常方便的方式应用多个类。您甚至可以应用一个返回类对象的函数。 [class. 让你只能申请一个类（当然你可以使用类。几次但看起来很糟糕）。

【讨论】：

【解决方案4】：

在当前版本的 Angular 中，以下语法也可以正常工作：

[class]="{toggled: sidebarActive, test: true,test1: sidebarActive}

所以据我了解，使用ngClass 和[class] 绑定没有区别？

Example

【讨论】：

你在问问题吗？
我正在回答这个问题，但它已经很老了。我能找到的唯一区别是 ngClass 可以处理多个类绑定，而 [class] 绑定只能处理一个，但这似乎不是真的。所以我唯一的问题是 - 有什么区别吗？
您不应该在答案框中提问 :) 请参阅 tour 和 how to answer。但你是说你的帖子有一半是答案.. 另一半是问题。
我的大部分答案实际上是在回答有关新版本 Angular 的问题。所以正如我之前所说，我不是在问这个问题，我问的“问题”是相当修辞和腋窝的。

【解决方案5】：

在[ngClass] 中，您可以像这样添加两个不同的类之一：

<div [ngClass]="a === b ? 'class1' : 'class2'">

【讨论】：

你也可以这样做
答案中的这种行为不区分[ngClass]。您可以对 [class] 执行相同操作。
就像已经提到的一样，可以用 [class] 完成，请更新你的答案。