77

以下片段之间的Angular 2有什么区别：

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

8 回答 8

69

这是特殊的 Angular 绑定语法

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

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

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

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

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

于 2017-07-26T08:35:03.717 回答
27

上面两行代码是关于Angular中的CSS class绑定的。基本上有 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，您也可以有条件三元运算符。

于 2018-05-21T03:17:41.543 回答
12

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

于 2017-07-26T08:36:32.860 回答
10

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

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

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

例子

于 2020-11-30T22:52:31.760 回答
8

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

<div [ngClass]="a === b ? 'class1' : 'class2'">
于 2017-07-26T08:41:14.350 回答
0

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

于 2021-05-10T06:22:09.370 回答
0

没有人提到，如果你同时使用[class]和[ngClass]绑定，一旦你尝试将一些类字符串传递给[class]由[ngClass]. 他们可以竞争。

[class]例如，只要[ngClass]与此类关联的条件评估为真，这将不会将“d-flex”类值分配给绑定：

组件.html

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

组件.ts

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

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

于 2021-05-29T19:48:08.193 回答
0

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

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

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

[ng类]

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

[班级]

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

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

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

于 2022-02-19T12:30:50.643 回答