本篇文章给大家介绍一下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]="'example-class'"> </div>
当然使用此属性绑定静态类并无太大的意义，我们可以根据条件绑定相关的类：
<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>
来实现上述的需求。
更好的使用 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 ，添加类。
更多编程相关知识，请访问：编程入门！！
