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

Question

Angular 2 中以下片段有何区别：

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

Answer 1

这是特殊的Angular绑定语法

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

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

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

以上两行代码是相对于CSS class binding in Angular。基本上有 2-3 种方法可以将 css class 绑定到 angular 组件。

您在模板中的括号内提供了一个 class 名称和 class.className，然后在右侧提供一个表达式，该表达式的计算结果应为 true 或 false确定是否应应用 class。这是下面的那个，其中 extra-sparkle(key) 是 css class 和 isDelightful(value).

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

当可能添加 多个 classes 时，NgClass 指令会派上用场。 NgClass 应该接收一个带有 class 名称的对象作为键和表达式，计算结果为 true 或 false。额外的闪光是关键，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，您也可以有条件三元运算符。

Answer 5

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

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

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

Example

Answer 6

是的，在 class 绑定 ([class]) 的帮助下，我们还可以附加多个 css class 最新版本。 ex:[class]='{object with key as class name and value as true/false}' same like [ngClass] 所以..[class]绑定和内置[ngClass]指令

之间没有区别

Answer 7

没有人提到，如果您同时使用 [class] 和 [ngClass] 绑定，一旦您尝试将一些 class 字符串传递给 [class] 时，可能会发生一些混淆，即'registered' 通过 [ngClass]。他们可以竞争。

例如只要与此 class 关联的 [ngClass] 条件的计算结果为真，这就不会将 'd-flex' class 值分配给 [class] 绑定：

component.html

<div [ngClass]="{'d-flex': falseCondition}" [class]="getClassBasedOnCondition()">

component.ts

public getClassBasedOnCondition(): string {
    return trueCondition ? 'd-flex' : '';
}

您可以使用 [class.] 而不是 [ngClass] 来避免这种行为，只要您没有多个 class 名称，例如 [ngClass]="{'d-flex p-1': condition}"

Answer 8

看完多个答案后，我想添加我的观点，因为这可能会有所帮助。

因此，Angular 计划在未来的版本中删除 [ngClass] 和 [ngStyle] 指令。

截至目前（Angular-v13），[class]绑定支持添加多个cssclasses.尽管与 [ngClass] 相比存在一些功能差距。你可以检查这个 - https://github.com/angular/angular/issues/40623

[ngClass]

<p [ngClass] = “‘addGreen’”> Hello World </p> 
<p [ngClass] = “[‘addGreen’, ‘addFont’, ‘addBg’]”> Hello World </p>
<p [ngClass] = “{ addGreen: true, addBg: true, addFont: false }”> Hello World </p> 
<p [ngClass] = “{ addGreen addBg: true, addFont: false}”> Hello World </p>

[class]

<p [class] = “‘addGreen’”> Hello World </p> 
<p [class] = “[‘addGreen’, ‘addFont’, ‘addBg’]”> Hello World </p>
<p [class] = “{ addGreen: true, addBg: true, addFont: false }”> Hello World </p>

注意：以下添加多个 classes 的方法是不可能的

Hello World

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

Difference between [ngClass] vs [class] binding

single-page-application

angular-ng-class

angular2-directives

angular