動態綁定Class
在 HTML 元素上新增和刪除 CSS 類別。
1
2
| ngClass
string | string[] | Set<string> | { [klass: string]: any; } | null | undefined
|
CSS 類別根據表達式評估的類型進行如下更新：
expression evaluation =>表達式求值
- 字串 - 新增字串中列出的 CSS 類別（以空格分隔），
- 陣列 - 新增聲明為陣列元素的 CSS 類，
- 物件 - 鍵是 CSS 類，當值中給出的表達式計算結果為真值時，它們會被添加，否則會被刪除
必須引入 NgClass
Ts [ngClass]必須引入NgClass
1
2
| <some-element [ngClass]="stringExp|arrayExp|objExp|Set">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
|
對於更簡單的用例，您可以直接使用類別綁定。它不需要導入指令。
1
2
3
4
| <some-element [class]="'first second'">...</some-element>
<some-element [class.expanded]="isExpanded">...</some-element>
<some-element [class]="['first', 'second']">...</some-element>
<some-element [class]="{'first': true, 'second': true, 'third': false}">...</some-element>
|
參考官網NgClass
NgStyle
用於更新包含 HTML 元素的樣式的屬性指令。
設定一個或多個樣式屬性，指定為冒號分隔的鍵值對。關鍵是樣式名稱，帶有可選的 . 後綴（例如 ‘top.px’、’font-style.em’）。該值是一個要評估的表達式。將以給定單位表示的結果非空值指派給給定的樣式屬性。如果評估結果為空，則刪除相應的樣式。
必須引入 NgStyle
Ts [ngStyle]必須引入NgStyle
將包含元素的寬度設定為表達式傳回的像素值。
1
2
3
| //[ngStyle]="{'Style':動態欄位}"
[ngStyle]="{'background-color': sendBgStyle}"
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
|
將包含元素的寬度設定為表達式傳回的像素值。...
1
| <some-element [style]="{'font-style': styleExp}">...</some-element>
|