Angular 2+ 样式绑定有哪些方式

这篇文章主要介绍了解析angular 2+ 样式绑定方式,现在分享给大家,也给大家做个参考。

引言

开发ngx(angular 2+ 以后都直接称为ngx)也有1年半的时间了,刚开始开发的时候使用的还是angular2 RC版,现在已经出angular5了,时光飞逝啊!

ngx从设计之初就是一个component-based的框架,所以大到一个页面,小到一个按钮,都是一个component。

这就涉及到了组件的重用,设计通用组件的时候,必不可少的就是动态的样式绑定。

回头想想, angular还真是给我们提供了好几种属性绑定的方式呢。

接下来我们就来具体看看如果在组件中使用样式绑定。

style binding

[style.propertyName]

我们有一个button,默认的样式是bootstrap的primary,

假如在不同的页面中按钮的大小要不同,这个时候就需要动态绑定button的字体大小,可以使用[style.propertyName]来实现。

template中代码

登录后复制登录后复制登录后复制

Component类中代码

private fontSize: string = "2em";

登录后复制

结果如图:

Angular 2+ 样式绑定有哪些方式

假如我们还需要动态设置button的边框半径border-radius,

template中代码则变为:

登录后复制登录后复制登录后复制

Component类中代码则变为:

private fontSize: string = "2em";private borderRadius: string = "10px";

登录后复制

则结果变成:

Angular 2+ 样式绑定有哪些方式

使用[style.propertyName]来绑定样式属性固然不粗,可是一旦有新的需求,我们就需要继续加上我们需要绑定的属性, 这个时候组件上绑定的属性就会越来越多,我们有没有办法来创建一个object来存储我们需要绑定的属性呢? 当然有,[ngStyle]就可以帮我们来做这件事情。

[ngStyle]

所以上面的例子,我们就可以直接使用[ngStyle]来动态绑定button的font-size和border-radius。

template中的代码则变为:

登录后复制登录后复制登录后复制

Component类的代码则变为:

private btnStyle: any = {  borderRadius: "10px",  fontSize: "2em"};

登录后复制

结果为:

Angular 2+ 样式绑定有哪些方式

[style.propertyName] vs. [ngStyle]

[style.propertyName]每次只能绑定一个属性

而 [ngStyle] 则可以同时绑定多个属性

当[style.propertyName] 和 [ngStyle] 绑定同一个属性时,比如都需要动态修改font-size, [style.propertyName]则会覆盖[ngStyle]里面的同一属性.

当然除了style binding, 我们还可以使用class binding来动态修改样式。

class binding

[class.className]

使用这种方式,我们可以根据绑定变量的值来动态添加或者移除css class。
还是使用刚才button的例子。

则代码变为:

//template//CSS.btnBorder { border-color: green; border-radius: 10px;}//Component Classprivate changeBorder: boolean = true;

登录后复制

结果如图:

Angular 2+ 样式绑定有哪些方式

看着字体有点小啊,我们再动态添加一个改变字体的class:my

这个时候代码就变为了:

//template//CSS.btnBorder { border-color: green; border-radius: 10px;}.btnFont { font-size: 2em; font-weight: bold;}//Component Classprivate changeBorder: boolean = true;private changeFont: boolean = true;

登录后复制登录后复制

结果如图:

Angular 2+ 样式绑定有哪些方式

[ngClass]

像[ngStyle]一样,angular也给我们提供了一个指令[ngClass]来动态绑定多个css class。

那么我们可以使用[ngClass]对上面的代码重构一下

//template//CSS.btnBorder { border-color: green; border-radius: 10px;}.btnFont { font-size: 2em; font-weight: bold;}//Component Classprivate changeBorder: boolean = true;private changeFont: boolean = true;

登录后复制登录后复制

结果依旧为:

Angular 2+ 样式绑定有哪些方式

[ngClass]需要绑定一个object,key是css类名, value是绑定的变量。

[class.className] vs. [ngClass]

[class.className]每次只能绑定一个CSS类。

而 [ngClass] 则可以同时绑定多个CSS类。

当[class.className] 和 [ngClass] 需要动态修改同一个样式时,比如都需要动态修改font-size, [class.className]则会覆盖[ngClass]里面的统一样式.

[className]

angular还提供一种绑定方式,就是直接通过修改元素的className来动态改变样式。

但我不推荐这种使用方式,为什么不推荐? 看下面的例子

//template//CSS.btnBorder { border-color: green; border-radius: 10px;}.btnFont { font-size: 2em; font-weight: bold;}//Component Classprivate changedFont: string = "btnFont";

登录后复制

结果却变成了这样:

Angular 2+ 样式绑定有哪些方式

我们预先设置好的bootstrap的primary被移除了, 就是因为[className]会添加动态绑定的类名,然后移除之前所有的类名。
所以这种绑定方式是很有危险性的,因为针对一个组件,我们通常都会有很多种类来共同控制样式。

在通用组件中,非常不推荐使用[className]。

总结

最后再来总结下angular中各种样式绑定的特点和区别:

[style.propertyName] 直接绑定一个string类型的样式值,或者string类型的变量。优先级最高,会覆盖已有的样式属性。

[ngStyle]绑定一个样式组合的object,key是css属性名,value是对应的样式值,或者string类型的变量。

[class.className] 直接绑定true/false, 或者boolean类型的变量。

[ngClass]绑定一个css类名组合的object,key是css类名,value是true/false 或者boolean类型的变量。

[className] 直接绑定css类名,或者string类型的变量。 (不推荐使用这种方式)

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

通过vue中v-for实现加载本地静态图片方法(详细教程)

通过vue中v-for实现加载本地静态图片方法(详细教程)

通过vue中v-for实现加载本地静态图片方法(详细教程)

通过vue中v-for实现加载本地静态图片方法(详细教程)

通过vue中v-for实现加载本地静态图片方法(详细教程)

以上就是Angular 2+ 样式绑定有哪些方式的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3185448.html

(0)
上一篇 2025年3月31日 22:24:57
下一篇 2025年3月31日 22:25:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue中如何使用动态内联样式实现动态样式绑定

    vue是一款非常流行的前端框架,由于其便捷的数据绑定和组件化的开发方式,越来越受到前端开发者的喜爱。在vue中,我们可以使用动态内联样式,为元素指定动态的样式属性,实现样式的动态绑定。在本文中,我们将详细介绍vue中如何使用动态内联样式实现…

    编程技术 2025年4月1日
    100
  • Vue中如何使用动态CSS实现动态样式绑定

    在vue中,动态css是一个非常强大的工具,可以让你根据应用状态动态的应用样式。通过这种方式可以实现许多令人印象深刻的动态效果,比如深色模式切换、主题色更换等。本文将介绍如何使用vue的动态css来实现动态样式绑定。 首先,在Vue中,我们…

    编程技术 2025年4月1日
    200
  • 在Angular2中如何实现父子组件通信

    本篇文章主要介绍了angular2 父子组件通信方式的示例,现在分享给大家,也给大家做个参考。 Angular2官方文档对组件交互这块有详细的介绍–>文档–组件之间的交互。按文档介绍,组件间交互的方式一共有4种…

    2025年3月31日 编程技术
    100
  • 对angular2与共享模块进行应用

    这次给大家带来对angular2与共享模块进行应用,对angular2与共享模块进行应用的注意事项有哪些,下面就是实战案例,一起来看一下。 创建模块,用到了共享模块PostSharedModule,共享模块里面包含了2个公用的模块:文章管理…

    编程技术 2025年3月31日
    200
  • Angular2使用Dom有哪些注意事项

    这次给大家带来Angular2使用Dom有哪些注意事项,Angular2使用Dom的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 Angular2的设计目标本来就是要让浏览器和DOM独立。DOM是复杂的,因此使组件与它分离,会让我…

    编程技术 2025年3月31日
    200
  • 在angular2中有关Http请求原理(详细教程)

    这篇文章主要介绍了angular2中http请求原理与用法,结合实例形式分析了angularjs中http相关模块实现http服务请求与相应的相关操作技巧,需要的朋友可以参考下 本文实例讲述了angular2中Http请求原理与用法。分享给…

    编程技术 2025年3月31日
    100
  • 在Angular2中如何去除url中的#号(详细教程)

    这篇文章主要给大家介绍了关于angular 2+时如何去除url中#号的相关资料,文中先对#号去除的原因及方法进行详细的介绍和分析,然后通过示例代码给大家演示去除的方法,需要的朋友可以参考借鉴 前言 本文中主要介绍了关于Angular2+中…

    编程技术 2025年3月31日
    100
  • 在Angular2中如何实现组件交互

    这篇文章主要介绍了angular2实现组件交互的方法,结合实例形式总结分析了angular2中组件交互的相关操作技巧与注意事项,需要的朋友可以参考下 本文实例讲述了Angular2实现组件交互的方法。分享给大家供大家参考,具体如下: 前言 …

    编程技术 2025年3月31日
    100
  • 在Angular中有关管道操作符(|)用法

    通常我们需要使用管道实现对数据的格式化,下面这篇文章主要给大家介绍了关于angular中管道操作符(|)的使用方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。 管道是什么? Angular的管道可…

    2025年3月31日
    100
  • 在Angular2中如何实现断点调试ts文件

    本篇文章主要介绍了angular2使用vscode断点调试ts文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 VSCode自带debugger工具,管理后台项目使用angular2,试了下调试ts文件…

    2025年3月31日 编程技术
    200

发表回复

登录后才能评论