[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

以上两行代码是关于Angular中的CSS类绑定.有两种方法可以将css类绑定到角度组件

您在模板中的括号之间提供了class.className的类名,然后在右侧提供了一个表达式,该表达式应该计算为true或false以确定是否应该应用该类.这是下面的一个,其中extra-sparkle(key)是css类和isDelightful(值).

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

当可能添加多个类时,NgClass指令非常方便.NgClass应该接受的对象与类名的计算结果为true或false.extra,火花是关键,isDelightful是值(布尔)键和表情.

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

现在伴随着额外的闪光,你也可以闪耀你的div.

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

要么

export class AppComponent {
    isDelightful: boolean = true;
    isGlitter:  boolean = true;

     sparkleGlitter()
    {
        let classes = {
            extra-sparkle: this.isDelightful,
            extra-glitter: this.isGlitter
        };
        return classes;
    }
}

<div [ngClass]='sparkleGlitter()'>

对于ngClass,您也可以使用条件三元运算符.

Answer 3

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

\n

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

\n

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

\n

[ng类]

\n

<p [ngClass] = \xe2\x80\x9c\xe2\x80\x98addGreen\xe2\x80\x99\xe2\x80\x9d> Hello World </p> \n<p [ngClass] = \xe2\x80\x9c[\xe2\x80\x98addGreen\xe2\x80\x99, \xe2\x80\x98addFont\xe2\x80\x99, \xe2\x80\x98addBg\xe2\x80\x99]\xe2\x80\x9d> Hello World </p>\n<p [ngClass] = \xe2\x80\x9c{ addGreen: true, addBg: true, addFont: false }\xe2\x80\x9d> Hello World </p> \n<p [ngClass] = \xe2\x80\x9c{ addGreen addBg: true, addFont: false}\xe2\x80\x9d> Hello World </p>\n

\n

[班级]

\n

<p [class] = \xe2\x80\x9c\xe2\x80\x98addGreen\xe2\x80\x99\xe2\x80\x9d> Hello World </p> \n<p [class] = \xe2\x80\x9c[\xe2\x80\x98addGreen\xe2\x80\x99, \xe2\x80\x98addFont\xe2\x80\x99, \xe2\x80\x98addBg\xe2\x80\x99]\xe2\x80\x9d> Hello World </p>\n<p [class] = \xe2\x80\x9c{ addGreen: true, addBg: true, addFont: false }\xe2\x80\x9d> Hello World </p> \n

\n

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

\n

<p [class] = \xe2\x80\x9c{ addGreen addBg: true, addFont: false}\xe2\x80\x9d> 你好世界

\n

Answer 4

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

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

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

例子

Answer 5

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

Answer 6

在[ngClass]中，您可以添加两个不同的类之一，如下所示：

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