这篇文章将为大家详细讲解有关angular中为HTML元素添加css类的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
主要是探索为 Angular 中的 HTML 元素动态的添加类的几种实现,包括 className 指令的使用,NgClass 的使用等。
主要代码是:
let element = document.getElementById('exampleTarget'); element.className = 'additional-class'
更具体的解释在 className 的用法 ,这里不在赘述。
可以简单的使用 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 的类的时候,上述的方式就稍显繁琐:
<div [className]="condition ? 'condition-true-example':''"> </div>
既不美观也不太好理解。
我们可以使用:
<div [class.example-class]="condition"> </div>
来实现上述的需求。
上述的所有添加类的方式,都可以使用 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
,添加类。
关于“angular中为HTML元素添加css类的方法有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。