在Angular 4中，[ngClass]="computeClass()"和class="{{computeClass()}}"之间的区别是什么？

Question

使用ngClass和直接使用HTML class属性在Angular 4中计算类的区别是什么？ [ngClass]="computeClass()" 和 class="{{computeClass()}}"

computeClass() {
  if (condition) {
    return 'class-a';
  } else {
    return 'class-b';
  }
}

两者返回相同的结果。这对性能有何影响？

编辑：我的问题与标记为重复的问题不同，因为它比较[ngClass]和[class]，而上面的比较是[ngClass]和class之间的比较。

- Swadeesh

---

可能是 Angular [ngClass] vs [class] 的重复问题。 - Muhammet Can TONBUL

谢谢你的建议，Amit。我已经将我的变更检测设置为ChangeDetectionStrategy.OnPush。 - Swadeesh

这只是在Angular启动更改检测后您手动执行的另一个更改检测。这可能无法解决问题。 - Amit Chigadani

@MuhammetCanTONBUL 我认为这不是同一个问题...相似但并不相同。 - Patricio Vargas

Answer 1

你在谈论插值（Interpolation）和属性绑定（Property Binding）。

两者都会给出相同的结果。

插值

插值是一种特殊的语法，Angular将其转换为属性绑定。它是属性绑定的方便替代方式。

例如：

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{citedExample}}</h1>
                    <img src=' https://angular.io/{{imagePath}}'/>
                </div>`
})
export class AppComponent {
    citedExample: string = 'Interpolation';
    imagePath: string = 'assets/images/logos/angular/[e-mail]';
}

属性绑定

如果要将元素属性设置为非字符串数据值，则必须使用属性绑定。

例如：

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
    <button [disabled]='isDisabled'>Try Me</button>
                     </div>`
})
export class AppComponent {
isDisabled: boolean = true;
}

如果我们决定使用插值而不是属性绑定，那么无论isDisabled类属性的值是true还是false，按钮都将始终被禁用。

- Shashikant Devani

Answer 2

请查看此处的ngClass文档（链接）。

来自Angular文档：

The CSS classes are updated as follows, depending on the type of the expression evaluation:

string - the CSS classes listed in the string (space delimited) are added,
Array - the CSS classes declared as Array elements are added,
Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are

removed.

正如您所看到的，ngClass 接受不同类型的参数。如果您只传递一个字符串，则此 CSS 类将附加到 HTML 元素上。当您使用插值时（如 Shashikant Devani 所提到的），也是同样的方式。

然而，ngClass 可以做得更多。例如，如果您传递一个对象，则可以有条件地添加多个 CSS 类。

如果我们将其应用于您的示例，则它的工作原理如下：

computeClass() {
  return {
     "class-a": condition,
     "class-b": !condition
  };
}

这是一个普通的JavaScript对象。classA只有在conditionA为真时才会被添加，classB也是如此。如果您想了解更多关于ngClass的可能性，请查看文档。

- Spitzbueb

Answer 3

这个 class="{{computeClass()}}" 或者 [class]="computeClass()" 是一个属性绑定，它只接受字符串值作为类名称或类列表，如下所示

class="class1 class2"

然后你可以像这样做

[class]="condition ? 'class-a' : 'class-b'"  

关于为什么会返回字符串值，目前还不清楚。

NgClass是一个内置的Angular指令，根据输入设置class属性，可以接受以下列表中的值：

• 字符串 - 列在字符串中（以空格分隔）的CSS类将被添加。
• 数组 - 声明为数组元素的CSS类将被添加，
• 对象 - 键是CSS类，当给定的表达式计算为真值时，它们将被添加，否则它们将被删除。

ngClass的示例：

[ngClass]="condition ? 'class-a' : 'class-b'"
[ngClass]="{'class-a' :condition ,'class-b':!condition"}

在编程方面，你的情况两种方式都可以接受，但在一些高级情况下，你会发现ngClass更适合使用，并且被认为是处理添加或删除类的最佳实践。

- Muhammed Albarmavi