本篇文章給大家介紹一下angular中為HTML元素添加css類的幾種方式。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
主要是探索為 Angular 中的 HTML 元素動態(tài)的添加類的幾種實現(xiàn)，包括 className 指令的使用，NgClass 的使用等。
原生 JavaScript 為元素添加一個類
主要代碼是：
let element = document.getElementById('exampleTarget');
element.className = 'additional-class'更具體的解釋在 className 的用法 ，這里不在贅述。
使用 [className] 屬性綁定在 Angular 中添加 css 類
可以簡單的使用 className 為我們的 HTML element 綁定類：
<div [className]="'example-class'"> </div>
當然使用此屬性綁定靜態(tài)類并無太大的意義，我們可以根據(jù)條件綁定相關(guān)的類：
<div [className]="condition ? 'condition-true-example-class': 'false-example-class'"> </div>
在 condition 為 true 的時候，會添加 condition-true-example-class 類，為 false 的時候會添加 false-example-class 類。
同樣，我們還可以寫入其他的簡單的判別：
<div [className]="'example-class' + variableValue"> </div>
基于條件切換 css 的類
當基于某些條件切換 css 的類的時候，上述的方式就稍顯繁瑣：
<div [className]="condition ? 'condition-true-example':''"> </div>
既不美觀也不太好理解。
我們可以使用：
<div [class.example-class]="condition"> </div>
來實現(xiàn)上述的需求。
更好的使用 ngClass 指令
上述的所有添加類的方式，都可以使用 ngClass 來替代。
該指令只是語法糖，可以是代碼看起來更加簡潔明了。
像我們使用 ngClass 指令來完成上面的兩個示例：
<!-- 替代 className 屬性綁定 -->
<div [ngClass]="{
'condition-true-example-class': condition,
'false-example-class': !condition
}">
</div>
<!-- 替代基于條件切換 class -->
<div [ngClass]="{'example-class': condition}">
</div>除了上述的方式， ngClass 還有一些其他的常用方式：
<!-- 添加單個類 --> <div [ngClass]="'example-class'"> </div> <!-- 添加多個類 --> <div [ngClass]="['example-class','example-class-2']"> </div>
更多使用方式請查看： 官方文檔
需要注意的是：
如果在組件的 ts 文件中使用 HostBinding 添加了多個類：
export class AppExampleComponent implements OnInit {
@HostBinding('class') className = 'example-basic-class cursor-pointer d-inline-flex align-items-center';
// ...
}那么在使用的時候，則不能在通過 class 、className 、ngClass ，添加類。
