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

Question

在Angular 2中，下面这些代码片段有什么区别：

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

- Ben Taliadoros

---

值得注意的是，还有一个[className]属性绑定，可以像这样使用<div [className]="isDelightful ? 'extra-sparkle'">。 - Mike Poole

你不需要用 : 来完成三元运算符吗？否则，在使用 && 替换 ? 的情况下将是有效的。 - Ben Taliadoros

Answer 1

这是特殊的Angular绑定语法

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

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

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

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

ngClass 更为强大。它允许你绑定一个类名字符串、一个字符串数组，或者像你的示例中一样的对象。

- Günter Zöchbauer

---

啊，所以在文档中当它说 <div [attr.role]="myAriaRole"> 时，它绑定的是 div 的 role 属性，而不是控制器中名为 attr 的对象的 role 属性。有道理，谢谢。 - Ben Taliadoros

attr.foo 用于绑定 HTML 元素的属性而非属性值。参考 https://dev59.com/32025IYBdhLWcg3wcli- 。Angular 组件和指令中的 @Input() 被视为属性。只有字符串值支持绑定到属性，而属性则支持任何类型的值。如果有一个与要绑定的属性名称匹配的 @Input()，该值也将传递给 @Input()。如果绑定到元素的原生属性（例如 <label> 中的 for），则浏览器会有自己的实现方式来反映该值到属性值。 - Günter Zöchbauer

谢谢，虽然我认为“仅绑定到属性支持字符串值，属性支持任何类型的值”可能被打错了？ - Ben Taliadoros

那么，在这种情况下哪个更好用以获得更好的性能呢？无论你用哪一个都无所谓吗？ - Esteban Chornet

@romanm 是的，那也可以。不同之处在于你的版本会覆盖其他方式添加的类，因为 [class] 是完整的 HTML class="xxx" 属性/特性，而我回答中的变体仅添加/删除类 extra-sparkle 并保留其他类。 - Günter Zöchbauer

Answer 2

以上两行代码是关于在Angular中使用CSS类绑定的。您可以基本上有2-3种方法将CSS类绑定到Angular组件。

您可以在模板中使用class.className在括号中提供一个类名，然后在右侧提供一个表达式来确定该类是否应该应用，该表达式应该评估为true或false。以下是其中之一，extra-sparkle（key）是CSS类，isDelightful（value）是表达式。

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

当需要潜在地添加多个类时，NgClass指令非常有用。NgClass应该接收一个对象，其中类名作为键并且表达式的值为true或false。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，你也可以使用条件三元运算符。

- Hameed Syed

Answer 3

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

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

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

示例

- Daniel Budzyński

---

你在问问题吗？ - Scratte

我正在回答这个问题，但是这个问题相当陈旧。我能找到的唯一区别是 ngClass 可以处理多个 class 绑定，而 [class] 绑定只能处理一个，但这似乎并不正确。所以我的问题是 - 有什么区别吗？ - Daniel Budzyński

您不应该在答案框中提问 :) 请查看tour和how to answer。但是您说您的帖子一半是答案，另一半是问题。 - Scratte

我的答案的重点实际上是针对 Angular 的新版本回答问题。正如我之前所说，我并不是在问问题，我提出的“问题”更多是修辞和辅助作用。 - Daniel Budzyński

Answer 4

通过使用[ngClass]指令，您可以方便地应用多个类。您甚至可以应用返回包含多个类的对象的函数。而[class.指令则只能应用一个类（当然，您可以多次使用class.，但这看起来不太好）。

- elzoy

Answer 5

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

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

- FierceDev

---

您也可以这样做：<div class="{{a === b ? 'class1' : 'class2'}}"> - Ben Taliadoros

答案中的这个行为不能区分[ngClass]，你可以使用[class]来完成同样的事情。 - Will

就像已经提到的那样，使用[class]也可以完成相同的操作，请更新您的答案。 - Ahmed Hasn.

Answer 6

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

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

截至目前（Angular-v13），[class]绑定支持添加多个CSS类。尽管与[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>

[类]

<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> 

注意：以下添加多个类的方式不可行。

<p [class] = "{ addGreen addBg: true, addFont: false}"> 你好，世界

- Shivaay

Answer 7

没有人提到如果您同时使用和绑定，当您尝试将某些类字符串传递给通过“注册”的时，可能会产生一些困惑。它们可以竞争。

例如：只要与此类关联的条件已评估为true，则不会将“d-flex”类值分配给绑定：

component.html

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

component.ts

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

如果你不想出现这种情况，可以使用[class.]代替[ngClass]，只要你那里没有多个类名，例如[ngClass]="{'d-flex p-1': condition}"

- Vlad

---

在添加到这个答案的同时，我们可以考虑来自 https://angular.io/guide/style-precedence#style-precedence 的样式优先级。因为ngClass（同样适用于ngStyle）是一个指令，属性绑定比指令设置的样式具有更高的优先级，所以[class] =“classExpr”或[class.klass] =“expr”将覆盖ngClass。 - matias

Answer 8

是的，通过类绑定（[class]）的帮助，我们也可以在最新版本中附加多个CSS类。 例如：[class]='{以类名为键，真/假值为值的对象}'与[ngClass]相同。 因此... [class]绑定和内置的[ngClass]指令之间没有区别。

- Venkateswara