引用地址 ：http://yunkus.com/angular-api-ngclass/

用法

语

1. <some-element [ngClass]="'first second'">...</some-element>
2.  
3. <some-element [ngClass]="['first', 'second']">...</some-element>
4.  
5. <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
6.  
7. <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
8.  
9. <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

示例

语法中的头两种方法估计一看就会，跟我们平时给一个元素添加类名差不多。在实践的项目中我们用得比较多的就是通过条件来判断将要添加哪一个 class 类。

准备

如果还没有工程的新建一个项目工程：

1. ng new my-app

更多内容可查阅《Angular 4.x 工程项目搭建之旅》，我们直接用项目默认生成的三个文件（app.component.ts、app.component.html、app.component.css）来完成我们的例子。

套路一

app.component.ts (v1)

1. import { Component } from '@angular/core';
2.  
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. title = 'Angular 4.x NgClass';
10. }

app.component.html (v1)

1. <div>
2. <h1>{{title}}</h1>
3. <div [ngClass]="{'first': true, 'second': true, 'third': false}">云库前端</div>
4. </div>

app.component.css （后面的例子都会用到这个样式文件，就不再贴出来了）

1. .first {
2. font-size: 58px;
3. }
4.  
5. .second {
6. color: #373d41;
7. }
8.  
9. .third {
10. font-weight: bolder
11. }

这个示例其实也没什么意思，只是在上面的基础语法上添加了点样式而已。我们只需要关注 [ngClass]="{'first': true, 'second': true, 'third': false}"  这一行代码就可以了，它的写法也相当的清楚明了，以键值对的方法来显示，键为类名，值为一个布尔值（true | false），true 就显示对应的类，false 则删除对应的类。但在我们平时的项目中常常需要通过判断来动态地显示对应的类名，所以我们再作进一步探讨，实现动态显示类名。

套路二

在 app.component.ts 中添加一个变量，用作判断。

app.component.ts (v2)

1. import { Component } from '@angular/core';
2.  
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. title = 'Angular 4.x NgClass';
10. classFlag = true;
11. }

修改 app.component.html 方法，只需要把 true 或者 false 替换成一个变量就可以了。

app.component.html (v2)

1. <div>
2. <h1>{{title}}</h1>
3. <div [ngClass]="{'first': classFlag, 'second': classFlag, 'third': !classFlag}">云库前端</div>
4. </div>

这样做有什么好处呢？你可以动态控制类名的显示隐藏，下面我们在模板中添加一个按钮，并且绑定一个点击事件，用来控制类名的显示与隐藏；更改后的文件代码如下：

app.component.ts (v3)

1. import { Component } from '@angular/core';
2.  
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. title = 'Angular 4.x NgClass';
10. classFlag = true;
11.  
12. // 动态控制类名
13. changeClass(): void {
14. this.classFlag = !this.classFlag;
15. }
16. }

app.component.html (v3)

1. <div>
2. <h1>{{title}}</h1>
3. <div [ngClass]="{'first': classFlag, 'second': classFlag, 'third': !classFlag}">云库前端</div>
4. <button (click)="changeClass()">切换</button>
5. </div>

现在点击按钮就可以切换地显示不同的类名，你还可以单独控制每一个类的显示隐藏，只需给对应类添加一个用法判断的变量就可以。

套路三

你还可以批量添加类名，用法跟上面的差不多。

你只需要修改下 app.component.html  (v3) 中的代码就可以了：

app.component.html (v4)

1. <div>
2. <h1>{{title}}</h1>
3. <div [ngClass]="{'first second third': classFlag}">云库前端</div>
4. <button (click)="changeClass()">切换</button>
5. </div>

套路四

这个除了模板中的代码有点不一样外，其它的文件代码都跟上面的一样，当你要添加的类名只有一个的时候，你可以像下面这样写

app.component.html (v5)

1. <div>
2. <h1>{{title}}</h1>
3. <div [class.first]="classFlag">云库前端</div>
4. <button (click)="changeClass()">切换</button>
5. </div>

套路五

除了可以给 NgClass 添加字符串类型的类名外，我们还可以使用对象，数组来添加多个类。

我们只对 app.component.html 和 app.component.ts 稍作修改就可以了，其它代码不需要改动：

app.component.html (v6)

1. <div>
2. <h1>{{title}}</h1>
3. <div [ngClass]="classArray">云库前端</div>
4. <!-- <button (click)="changeClass()">切换</button> -->
5. </div>

app.component.ts (v6)

1. import { Component } from '@angular/core';
2.  
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. title = 'Angular 4.x NgClass';
10. classFlag = true;
11.  
12. // 动态控制类名
13. // changeClass(): void {
14. // if (this.classArray.length != 0) {
15. // this.classArray = [];
16. // } else {
17. // this.classArray = [
18. // "first",
19. // "second",
20. // "third"
21. // ]
22. // }
23. // }
24.  
25. // 把类名保存在一个数组中
26. classArray: String[] = [
27. "first",
28. "second",
29. "third"
30. ]
31. }

套路六

如果想切换效果，把模板 app.component.html 和 app.component.ts 中注释的代码放出来就可以了。

如果是通过对象来添加的话，你可以更人性化了，因为你可以通过 key:value （key 为类名，value 为布尔值）的形式来控制显示隐藏对应的类名我们来看个例子：

app.component.html (v7)

1. <div>
2. <h1>{{title}}</h1>
3. <div [ngClass]="classObject">云库前端</div>
4. <button (click)="changeClass()">切换</button>
5. </div>

app.component.ts (v7)

1. import { Component } from '@angular/core';
2.  
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. title = 'Angular 4.x NgClass';
10. classFlag = false;
11. classObject: Object = {}
12.  
13. // 动态控制类名
14. changeClass(): void {
15. this.classFlag = !this.classFlag;
16. this.classObject = {
17. "first": this.classFlag,
18. "second": !this.classFlag,
19. "third": this.classFlag
20. }
21. }
22. }

关温暖

Angular 1.x 中的写跟上面的也差不了多，所以在里也把 Angular 1.x  的贴出来：

Angular 1.x NgClass

1. <div ng-class="{first: classFlag}"></div>
2. <div ng-class="{first: classFlag,second: classFlag}"></div>
3. <div ng-class="{true: 'first',false: 'second'}[classFlag]"></div>

上面就是 Angular 1.x 关于 NgClass 判断显示类名的3种写法， Angular 4.x NgClass 跟 Angular 1.x  的写法很相似有没有。

以上就是 Angular 4.x NgClass 的基本用法，喜欢就收藏吧！