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的表达式，以确定是否应该应用该类。这就是下面是一个额外的闪光（键）是css类，而且是很好的（值）。

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

当可能添加多个类时， NgClass 指令非常方便。 NgClass应该接收一个对象，其中类名作为键和表达式，其值为true或false.extra-sparkle是键，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

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

Answer 4

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

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

Answer 5

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

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

据我所知，使用ngClass和[class]绑定之间没有区别吗？

示例：https://stackblitz.com/edit/angular-ivy-dr66ww?file=src/app/app.component.html

Answer 6

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

Answer 7

没有人提到如果同时使用 [class] 和 [ngClass] 绑定，一旦您尝试将某个类字符串传递给 [class] 时会发生一些混淆，该字符串由 {{1} '注册' }}。他们可以竞争。

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

component.html

[ngClass]

component.ts

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

你可以使用 public getClassBasedOnCondition(): string { return trueCondition ? 'd-flex' : ''; } 而不是 [class.] 来避免这种行为，只要你那里没有类合金，比如 [ngClass]

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

7 个答案: