Question

使用ngClass计算类和使用Angular 4中的HTML class属性直接计算类有什么区别。

[ngClass]="computeClass()"

和

class="{{computeClass()}}"

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

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

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

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/logo-nav@2x.png';
}

属性绑定

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

例如：

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，该按钮将始终处于禁用状态。

Answer 2

看看ngClass here.

的文档

来自角度文档：

CSS类的更新如下，具体取决于表达评估：

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

已删除。

您可以看到ngClass接受了不同类型的参数。如果仅传递字符串，则此css类将附加到HTML元素。使用插值时的方式相同（如Shashikant Devani所述）。

然而ngClass可以做更多的事情。如果在示例中传递对象，则可以有条件地添加多个CSS类。

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

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

这是一个普通的javascript对象。仅在classA为真且conditionA相同的情况下，才会添加classB。如果您想进一步了解ngClass的可能性，请查看文档。

Answer 3

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

class="class1 class2"

您将执行类似的操作

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

到目前为止，为什么都会尝试字符串值

NgClass 是基于输入的内置角度指令，它将设置class属性可以接受此值列表

string-添加了字符串（以空格分隔）中列出的CSS类。
Array-添加了声明为Array元素的CSS类，
对象-键是在表达式中添加的CSS类值中给出的值为真值，否则为删除。

ngClass

的示例

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

您的情况都是可以接受的，但是在某些高级情况下，您会发现 ngClass 更容易使用，并考虑了处理添加或删除类的最佳做法

Angular 4中[ngClass] =“ computeClass（）”和class =“ {{computeClass（）}}”“之间的区别

3 个答案: