用法

語

1. <some-element [ngClass]="'first second'">...</some-element>
2. <some-element [ngClass]="['first', 'second']">...</some-element>
3. <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
4. <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
5. <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. @Component({
3. selector: 'app-root',
4. templateUrl: './app.component.html',
5. styleUrls: ['./app.component.css']
6. })
7. export class AppComponent {
8. title = 'Angular 4.x NgClass';
9. }

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. .second {
5. color: #373d41;
6. }
7. .third {
8. font-weight: bolder
9. }

這個示例其實也沒什麼意思，只是在上面的基礎語法上添加了點樣式而已。我們只需要關注 [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. @Component({
3. selector: 'app-root',
4. templateUrl: './app.component.html',
5. styleUrls: ['./app.component.css']
6. })
7. export class AppComponent {
8. title = 'Angular 4.x NgClass';
9. classFlag = true;
10. }

修改 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. @Component({
3. selector: 'app-root',
4. templateUrl: './app.component.html',
5. styleUrls: ['./app.component.css']
6. })
7. export class AppComponent {
8. title = 'Angular 4.x NgClass';
9. classFlag = true;
10. // 動態控制類名
11. changeClass(): void {
12. this.classFlag = !this.classFlag;
13. }
14. }

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. @Component({
3. selector: 'app-root',
4. templateUrl: './app.component.html',
5. styleUrls: ['./app.component.css']
6. })
7. export class AppComponent {
8. title = 'Angular 4.x NgClass';
9. classFlag = true;
10. // 動態控制類名
11. // changeClass(): void {
12. // if (this.classArray.length != 0) {
13. // this.classArray = [];
14. // } else {
15. // this.classArray = [
16. // "first",
17. // "second",
18. // "third"
19. // ]
20. // }
21. // }
22. // 把類名儲存在一個數組中
23. classArray: String[] = [
24. "first",
25. "second",
26. "third"
27. ]
28. }

套路六

如果想切換效果，把模板 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. @Component({
3. selector: 'app-root',
4. templateUrl: './app.component.html',
5. styleUrls: ['./app.component.css']
6. })
7. export class AppComponent {
8. title = 'Angular 4.x NgClass';
9. classFlag = false;
10. classObject: Object = {}
11. // 動態控制類名
12. changeClass(): void {
13. this.classFlag = !this.classFlag;
14. this.classObject = {
15. "first": this.classFlag,
16. "second": !this.classFlag,
17. "third": this.classFlag
18. }
19. }
20. }

關溫暖

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 的基本用法，喜歡就收藏吧！