本篇文章给大家介绍一下angular中为html元素添加css类的几种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
主要是探索为 Angular 中的 HTML 元素动态的添加类的几种实现，包括 className 指令的使用，NgClass 的使用等。 【相关推荐：《angular教程》】
原生 JavaScript 为元素添加一个类
主要代码是：
let element = document.getElementById('exampleTarget');element.className = 'additional-class'
登录后复制
更具体的解释在 angular ，这里不在赘述。
使用 [className] 属性绑定在 Angular 中添加 css 类
可以简单的使用 className 为我们的 HTML element 绑定类：
立即学习“前端免费学习笔记（深入）”；
登录后复制登录后复制登录后复制登录后复制登录后复制
当然使用此属性绑定静态类并无太大的意义，我们可以根据条件绑定相关的类：
登录后复制登录后复制登录后复制登录后复制登录后复制
在 condition 为 true 的时候，会添加 condition-true-example-class 类，为 false 的时候会添加 false-example-class 类。
同样，我们还可以写入其他的简单的判别：
登录后复制登录后复制登录后复制登录后复制登录后复制
基于条件切换 css 的类
当基于某些条件切换 css 的类的时候，上述的方式就稍显繁琐：
登录后复制登录后复制登录后复制登录后复制登录后复制
既不美观也不太好理解。
我们可以使用：
登录后复制登录后复制登录后复制登录后复制登录后复制
来实现上述的需求。
更好的使用 ngClass 指令
上述的所有添加类的方式，都可以使用 ngClass 来替代。
该指令只是语法糖，可以是代码看起来更加简洁明了。
像我们使用 ngClass 指令来完成上面的两个示例：
登录后复制
除了上述的方式， ngClass 还有一些其他的常用方式：
登录后复制
更多使用方式请查看： angular
需要注意的是：
如果在组件的 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！！
以上就是详解angular中为HTML元素添加css类的几种方式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2713125.html
