Angular 2 通过 [class.className] 绑定添加多个类答案

【问题标题】：Angular 2 add multiple classes via [class.className] bindingAngular 2 通过 [class.className] 绑定添加多个类
【发布时间】：2017-08-28 01:43:51
【问题描述】：

虽然添加单个类以这种方式效果很好 -

[class.loading-state]="loading"

但是如何添加多个类例如，如果 loading 是 true 添加类 - "loading-state" & "my-class"

我如何通过[class] binding完成它

【问题讨论】：

标签： javascript angular binding

【解决方案1】：

您可以通过简单地使用ngClass 来做到这一点：

这里的第一、第二和第三是类的名称。

你可以直接把你的条件放在那里而不是 true/false

 <div [ngClass]="{'first': true, 'second': true, 'third': false}">...</div>

你的情况

 <div [ngClass]="{'loading-state': loading, 'my-class': loading }">...</div>

或者更短的版本（正如@matko.kvesic 评论的那样）

<div [ngClass]="{'loading-state my-class': loading}">...</div>

【讨论】：

甚至：[ngClass]="{'loading-state my-class': loading}"
使用 Angular 7（及更高版本）进行测试，您现在可以使用 [class]，因为您可以将 [ngClass] 用于多个类，例如[class]="['my-first-class', 'my-second-class']"
标签stackblitz.com/edit/angular-playground-inhqyx?file=app/…
的简单示例见下文

【解决方案2】：

虽然Vivek Doshi 的答案是完全正确的，但下面我提出了其他替代方法来对不同的布尔变量做同样的事情：

第一种解决方案：[class.className]

模板：

<div [class.first-class]="addFirst" [class.second-class]="addSecond">...</div>

组件：

export class MyComponent {
  ...
  addFirst: boolean;
  addSecond: boolean;
  ...
}

第二个解决方案：[ngClass] 与方法绑定

模板：

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

组件：

export class MyComponent {
  ...
  addFirst: boolean;
  addSecond: boolean;
  ...
  setClasses() {
    return {
      'first-class': this.addFirst,
      'second-class': this.addSecond
    };
  }
  ...
}

最后的解决方案，但并非最不重要：

模板：

<div [ngClass]="{'first-class': addFirst, 'second-class': addSecond}">...</div>

组件：

export class MyComponent {
  ...
  addFirst: boolean;
  addSecond: boolean;
  ...
}

【讨论】：