簡談 Angular 動態綁定樣式的幾種方法

動態綁定樣式的本質是操作元素的 class 列表和內聯樣式。因為 class 和 style 都是 attribute，所以我們可以用 Attribute 綁定處理它們：只需要通過表達式計算出字符串結果即可。同理我們也可以用 Property 綁定處理。另外，Angular 還提供了專門的 class Attribute 綁定和 style Attribute 綁定。內置屬性型指令 NgClass 和 NgStyle 也是用來動態綁定樣式的。

一、綁定 HTML Class

（一）Attribute 綁定

語法	輸入類型
[attr.class]="classExp"	string

該方法的優先級最高，表達式結果是最終的 class 屬性值。

（二）Property 綁定

語法	輸入類型
[className]="classExp"	string

該方法的優先級比 Attribute 綁定低，表達式結果是最終的 class 屬性值。

（三）class Attribute 綁定

綁定類型	語法	輸入類型
單 class 綁定	[class.key]="classExp"	boolean | undefined | null
多 class 綁定	[class]="classExp"	string| Array<string> | {[key: string]: boolean | undefined | null}

該方法會更新 class 屬性值，更新邏輯取決於結果的類型。
單 class 綁定：

• 當綁定的值為真的時候添加，為假則移除。

多 class 綁定：

• string - 會把列在字符串中的 classes（空格分隔）添加進來，
• Array - 會把數組中的各個元素作為 classes 添加進來，
• Object - 每個 key 都是要處理的 class，當 value 的值為真的時候添加，為假則移除。

（四）內置屬性型指令 NgClass 綁定

語法	輸入類型
[ngClass]="classExp"	string | Array<string> | Set<string> | { [klass: string]: any; }

該方法類似於上面的多 class 綁定，但是功能更加強大，比如：

• 支持輸入 Set 類型，
• 輸入 Object 類型時支持 key 中帶空格（表示多個 class）。

二、綁定內聯樣式

（一）Attribute 綁定

語法	輸入類型
[attr.style]="styleExp"	string

表達式結果是最終的 style 屬性值。

（二）style Attribute 綁定

綁定類型	語法	輸入類型
單 style 綁定	[style.key]="styleExp"	string | undefined | null
帶單位的單 style 綁定	[style.key.unit]="styleExp"	number | undefined | null
多 style 綁定	[style]="styleExp"	string| Array<string> | {[key: string]: string | undefined | null}

該方法會更新 style 屬性值，更新邏輯取決於結果的類型（參考 class Attribute 綁定的更新邏輯）。

（三）內置屬性型指令 NgStyle 綁定

語法	輸入類型
[ngStyle]="styleExp"	{ [klass: string]: any; }

該方法會更新 style 屬性值，輸入類型只能是對象。其中 key 是樣式名稱，帶有可選的單位后綴（比如 'top.px'，'font-style.em'）；value 是待求值的表達式。如果 value 不是 null，則把用指定單位表示的結果賦值給指定的樣式屬性；如果是 null，則刪除相應的樣式。

三、總結

綁定 HTML Class 的優先級為：Attribute 綁定 > Property 綁定 > 內置屬性型指令 NgClass 綁定 > 內置屬性型指令 NgClass 綁定。其中 Attribute 綁定和 Property 綁定會覆蓋掉其他 class，必須謹慎使用。建議對於單個 class 的動態綁定使用單 class 綁定，對於多個則使用 NgClass 綁定。綁定內聯樣式時同理。

文中使用的工具或者包的版本：
Angular CLI 11.0.6