[Angular] ngClass with JavaScript Set

Angular 的 ngClass 可以讓我們用 Object 的方式來動態設定 css class,其實我們還可以使用另外一種方式來控制 ngClass

Set

JavaScript 的 set 可以讓我們儲存任何資料,而且能確保該資料是唯一的,表示一個 set 裡面不會有重複的資料。基本用法如下

1
2
3
4
5
6
const set1 = new Set([1, 2, 3, 4, 5]);

set1.has(1); // true
set1.add(1); // set1 還是只有一個 1
set1.delete(1); // 將 1 從 set1 中移除
set1.has(1); // false

ngClass

在官方 API 文件中,提到 ngClass 可以接受 stringArrayObject 這三種格式的資料

1
2
3
4
5
6
7
8
9
<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

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

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

但其實,在程式碼內的型別定義卻多看到一個 Set<String> 的型別,這真的是一個好消息。因為我們就可以透過操作 set 的方式來控制顯示樣式

1
2
3
@Input()
set ngClass(value: string|string[]|Set<string>|{[klass: string]: any}) {
}

DEMO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<button (click)="showBlue()">Show Blue Text</button>
<button (click)="removeBlue()">Remove Blue Color</button>

<p [ngClass]="setClasses">
Start editing to see some magic happen :)
</p>
`,
styles: [
` .blue {
color: blue;
}`]
})
export class AppComponent {
setClasses = new Set();

showBlue() {
this.setClasses.add('blue');
}

removeBlue() {
this.setClasses.delete('blue');
}
}

上面的範例程式碼簡單的顯示出透過操作 set 的方式就能控制要顯示的樣式,會比直接操作陣列來的簡單太多了,提供給各位參考看看

參考資料