资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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://cdkjz.cn/article/poeicg.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
犀浦防纹窗四川成都托管服务器主动防护网温江网站设计成都移动机房做网站移动服务器托管VI设计成都办公窗帘成都主机托管

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图