189 8069 5689

angular中为HTML元素添加css类的方法有哪些

这篇文章将为大家详细讲解有关angular中为HTML元素添加css类的方法有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联服务项目包括江岸网站建设、江岸网站制作、江岸网页制作以及江岸网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，江岸网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到江岸省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

主要是探索为 Angular 中的 HTML 元素动态的添加类的几种实现，包括 className 指令的使用，NgClass 的使用等。

原生 JavaScript 为元素添加一个类

主要代码是：

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

element.className = 'additional-class'

更具体的解释在 className 的用法 ，这里不在赘述。

使用 [className] 属性绑定在 Angular 中添加 css 类

可以简单的使用 className 为我们的 HTML element 绑定类：

当然使用此属性绑定静态类并无太大的意义，我们可以根据条件绑定相关的类：

在 condition 为 true 的时候，会添加 condition-true-example-class 类，为 false 的时候会添加 false-example-class 类。

同样，我们还可以写入其他的简单的判别：

基于条件切换 css 的类

当基于某些条件切换 css 的类的时候，上述的方式就稍显繁琐：

既不美观也不太好理解。

我们可以使用：

来实现上述的需求。

更好的使用 ngClass 指令

上述的所有添加类的方式，都可以使用 ngClass 来替代。

该指令只是语法糖，可以是代码看起来更加简洁明了。

像我们使用 ngClass 指令来完成上面的两个示例：



  




  

除了上述的方式， ngClass 还有一些其他的常用方式：



  




  

更多使用方式请查看： 官方文档

需要注意的是：

如果在组件的 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类的方法有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


名称栏目：angular中为HTML元素添加css类的方法有哪些
分享路径：http://cdxtjz.cn/article/poeicg.html

其他资讯