詳解angular中為HTML元素添加css類別的幾種方式

本篇文章跟大家介紹一下angular中為HTML元素加入css類別的幾種方式。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

主要是探索為 Angular 中的 HTML 元素動態的添加類別的幾種實現，包括 className 指令的使用，NgClass 的使用等。   【相關推薦：《angular教學》】

原生JavaScript 為元素新增一個類別

##主要程式碼是：

let element = document.getElementById('exampleTarget');

element.className = 'additional-class'

更具體的解釋在

className 的用法 ，這裡不在贅述。

使用[className] 屬性綁定在Angular 中加入css 類別

可以簡單的使用

className 為我們的HTML element 綁定類：

<div [className]="&#39;example-class&#39;">

</div>

當然使用此屬性綁定靜態類別並無太大的意義，我們可以根據條件綁定相關的類別：

<div [className]="condition ? &#39;condition-true-example-class&#39;: &#39;false-example-class&#39;">

</div>

在

condition 為true 的時候，會加上condition-true-example-class 類，為false 的時候會加上false-example-class 類。

同樣，我們也可以寫入其他的簡單的判別：

<div [className]="&#39;example-class&#39; + variableValue">

</div>

#基於條件切換css 的類別

當基於某些條件切換css 的類別的時候，上述的方式就稍顯繁瑣：

<div [className]="condition ? &#39;condition-true-example&#39;:&#39;&#39;">

</div>

既不美觀也不太好理解。

我們可以使用：

<div [class.example-class]="condition">

</div>

來實現上述的需求。

更好的使用 ngClass 指令

上述的所有新增類別的方式，都可以使用

ngClass 來取代。

該指令只是語法糖，可以是程式碼看起來更簡潔明了。

就像我們使用

ngClass 指令來完成上面的兩個範例：

<!-- 替代 className 属性绑定 -->
<div [ngClass]="{
    &#39;condition-true-example-class&#39;: condition,
    &#39;false-example-class&#39;: !condition
}">
  
</div>

<!-- 替代基于条件切换 class -->
<div [ngClass]="{&#39;example-class&#39;: condition}">
  
</div>

除了上述的方式，

ngClass 還有一些其他的常用方式：

<!-- 添加单个类 -->
<div [ngClass]="&#39;example-class&#39;">
  
</div>

<!-- 添加多个类 -->
<div [ngClass]="[&#39;example-class&#39;,&#39;example-class-2&#39;]">
  
</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 ，新增類別。

更多程式相關知識，請造訪：

程式設計入門！ ！

以上是詳解angular中為HTML元素添加css類別的幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！