详解angular中为HTML元素添加css类的几种方式
时间:2021-05-27 来源:互联网
今天PHP爱好者给大家带来本篇文章给大家介绍一下angular中为HTML元素添加css类的几种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
主要是探索为 Angular 中的 HTML 元素动态的添加类的几种实现,包括 className 指令的使用,NgClass 的使用等。
原生 JavaScript 为元素添加一个类
主要代码是:
let element = document.getElementById('exampleTarget');
element.className = 'additional-class'
更具体的解释在 className 的用法 ,这里不在赘述。
使用 [className] 属性绑定在 Angular 中添加 css 类
可以简单的使用 className
为我们的 HTML element 绑定类:
<p [className]="'example-class'">
</p>
当然使用此属性绑定静态类并无太大的意义,我们可以根据条件绑定相关的类:
<p [className]="condition ? 'condition-true-example-class': 'false-example-class'">
</p>
在 condition
为 true
的时候,会添加 condition-true-example-class
类,为 false
的时候会添加 false-example-class
类。
同样,我们还可以写入其他的简单的判别:
<p [className]="'example-class' + variableValue">
</p>
基于条件切换 css 的类
当基于某些条件切换 css 的类的时候,上述的方式就稍显繁琐:
<p [className]="condition ? 'condition-true-example':''">
</p>
既不美观也不太好理解。
我们可以使用:
<p [class.example-class]="condition">
</p>
来实现上述的需求。
更好的使用 ngClass 指令
上述的所有添加类的方式,都可以使用 ngClass
来替代。
该指令只是语法糖,可以是代码看起来更加简洁明了。
像我们使用 ngClass
指令来完成上面的两个示例:
<!-- 替代 className 属性绑定 -->
<p [ngClass]="{
'condition-true-example-class': condition,
'false-example-class': !condition
}">
</p>
<!-- 替代基于条件切换 class -->
<p [ngClass]="{'example-class': condition}">
</p>
除了上述的方式, ngClass
还有一些其他的常用方式:
<!-- 添加单个类 -->
<p [ngClass]="'example-class'">
</p>
<!-- 添加多个类 -->
<p [ngClass]="['example-class','example-class-2']">
</p>
更多使用方式请查看: 官方文档
需要注意的是:
如果在组件的 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类的几种方式的详细内容,更多请关注php爱好者其它相关文章!
-
怎么删除WinPE开始菜单中的程序(winpepge 怎么删除) 2025-06-28
-
PE启动时出现乱码怎么办(pe一直在启动界面) 2025-06-28
-
装机大师pe系统检测cpu核心速度使用教程(pcos装机大师) 2025-06-28
-
一键U盘重装系统进入WinPE时固定U盘盘符的方法(一键重装u盘启动) 2025-06-28
-
电脑无法进入到winPE系统中怎么办?(电脑无法进入到u盘系统) 2025-06-28
-
如何判断自己的电脑是否支持uefi启动模式?(如何判断自己的幸运色) 2025-06-28