Angular21 动态绑定class

  在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定;在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定

 

2 内置指令

  在angular中指令是作用在特定的DOM元素上的,目的是用来扩展元素的功能,为元素添加新的功能;angular框架本身提供的指令就叫做内置指令,例如:NgClass、NgStyle、NgIf、NgFor、NgSwitch等,利用NgClass、NgStyle和Class指令来动态绑定CSS样式

  技巧01:angular中的指令的类型首字母都是大写,但是在运用到DOM元素时需要将首字母变成小写,例如

    

Angular21 动态绑定class

 

3 利用NgClass指令实现CSS类绑定

  利用NgClass同时绑定一个或者多个CSS类

  3.1 NgClass绑定格式

    [ngClass]="{ CSS类名01:布尔类型,CSS类名:布尔类型 }"

    [ngClass]="styleMethod()"

    坑01:styleMethod是一个自定义的方法,该方法返回的是一个对象,该对象的格式是: { CSS类名01:布尔类型,CSS类名:布尔类型 }

    技巧01:对象的键最好用引号括起来,因为有的字符如果不用引号括起来就会报错,例如 _

    技巧02:对象的键值如果有特殊字符就需要用引号括起来,否则会报错(PS: 最好都用引号括起来)

  3.2 实际例子01

<p [ngClass]="{style01: true, style02: true}"> Donnot aim for your success if you really want it. Just stick to do what you love and believe in. </p>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfspg.html