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

Posted 2023-02-23

【中文标题】Angular 2 通过 [class.className] 绑定添加多个类

【英文标题】：Angular 2 add multiple classes via [class.className] binding

【发布时间】：2017-08-28 01:43:51

【问题描述】：

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

[class.loading-state]="loading"

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

我如何通过[class] 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']"

的简单示例见下文

【参考方案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;
  ...