angular中為HTML元素添加css類的方法有哪些

這篇文章將為大家詳細講解有關(guān)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 ，添加類。

關(guān)于“angular中為HTML元素添加css類的方法有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。