详解angular中为HTML元素添加css类的几种方式


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章给大家介绍一下angular中为HTML元素添加css类的几种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

主要是探索为 Angular 中的 HTML 元素动态的添加类的几种实现,包括 className 指令的使用,NgClass 的使用等。 【相关推荐:《angular教程》】

原生 JavaScript 为元素添加一个类

主要代码是:

1

2

3

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

 

element.className = 'additional-class'

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

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

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

1

2

3

<div [className]="'example-class'">

 

</div>

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

1

2

3

<div [className]="condition ? 'condition-true-example-class': 'false-example-class'">

 

</div>

conditiontrue 的时候,会添加 condition-true-example-class 类,为 false 的时候会添加 false-example-class 类。

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

1

2

3

<div [className]="'example-class' + variableValue">

 

</div>

基于条件切换 css 的类

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

1

2

3

<div [className]="condition ? 'condition-true-example':''">

 

</div>

既不美观也不太好理解。

我们可以使用:

1

2

3

<div [class.example-class]="condition">

 

</div>

来实现上述的需求。

更好的使用 ngClass 指令

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

<!-- 替代 className 属性绑定 -->

<div [ngClass]="{

    'condition-true-example-class': condition,

    'false-example-class': !condition

}">

   

</div>

 

<!-- 替代基于条件切换 class -->

<div [ngClass]="{'example-class': condition}">

   

</div>

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

1

2

3

4

5

6

7

8

9

<!-- 添加单个类 -->

<div [ngClass]="'example-class'">

   

</div>

 

<!-- 添加多个类 -->

<div [ngClass]="['example-class','example-class-2']">

   

</div>

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

需要注意的是:

如果在组件的 ts 文件中使用 HostBinding 添加了多个类:

1

2

3

4

export class AppExampleComponent implements OnInit {

  @HostBinding('class') className = 'example-basic-class cursor-pointer d-inline-flex align-items-center';

  // ...

}

那么在使用的时候,则不能在通过 classclassNamengClass ,添加类。

更多编程相关知识,请访问:编程入门!!

以上就是详解angular中为HTML元素添加css类的几种方式的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html的<dialog>标签

html文本格式化的实例详解

css中:not用法是什么

css如何设置颜色

分享一款html5视频背景插件

如何解决html、body元的高度问题

关于html big标签的作用和具体的用法详解(内有代码实例)

详细介绍css中的数学表达式calc()

带你玩转css中各种方向小箭头

写html代码用什么软件

更多相关阅读请进入《Angular》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...