Angular2中的类绑定和NgClass

将 CSS 类绑定到 Angular 2 模板中的元素很容易。您在模板中的括号之间提供一个带有 class.className 的类名称，然后在右侧提供一个表达式，该表达式的计算结果应为 true 或 false 以确定是否应应用该类。例如，以下是绑定单个类的方法：

<div [class.active]="isActive">
  ...
</div>

用于多个类的 NgClass

当应该添加多个类时，NgClass 指令非常方便。 NgClass 应该接收一个对象，其类名作为键和表达式，其值为真或假：

<div [ngClass]="myClasses">
  ...
</div>

然后 myClasses 将是组件中的一个属性，其中包含一个如下所示的对象：

myClasses = {
  important: this.isImportant,
  inactive: !this.isActive,
  saved: this.isSaved,
  long: this.name.length > 6
}

当然对象也可以是方法的返回值：

<div [ngClass]="setMyClasses()">
  ...
</div>

在关联的组件类中

setMyClasses() {
  let classes = {
    important: this.isImportant,
    inactive: !this.isActive,
    saved: this.isSaved,
    long: this.name.length > 6
  };
  return classes;
}

也可以看看

样式绑定 + NgStyle