全国咨询热线:18720358503

微信小程序免费_解析Angular 2+ 样式绑定方式

类别:企业动态 发布时间:2021-01-08 浏览人次:

解析Angular 2+ 样式绑定方式       这篇文章主要介绍了解析Angular 2+ 样式绑定方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

引言

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

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

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

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

style binding

[style.propertyName]

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

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

template中代码

 button 
 [style.fontSize]="fontSize" 
 Style Binding
 /button 

Component类中代码

private fontSize: string = "2em";

结果如图:

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

template中代码则变为:

 button 
 [style.fontSize]="fontSize"
 [style.borderRadius]="borderRadius" 
 Style Binding
 /button 

Component类中代码则变为:

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

则结果变成:

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

[ngStyle]

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

template中的代码则变为:

 button 
 [ngStyle]="btnStyle" 
 Style Binding
 /button 

Component类的代码则变为:

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

结果为:

[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
 button 
 [class.btnBorder]="changeBorder" 
 Style Binding
 /button 
//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
//Component Class
private changeBorder: boolean = true;

结果如图:

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

这个时候代码就变为了:

//template
 button 
 [class.btnBorder]="changeBorder" [class.btnFont]="changeFont" 
 Style Binding
 /button 
//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
.btnFont {
 font-size: 2em;
 font-weight: bold;
//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

结果如图:

[ngClass]

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

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

//template
 button 
 [ngClass]= "{'btnFont': changeFont, 'btnBorder': changeBorder}" 
 Style Binding
 /button 
//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
.btnFont {
 font-size: 2em;
 font-weight: bold;
//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

结果依旧为:

[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
 button 
 [className]="changedFont" 
 Style Binding
 /button 
//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
.btnFont {
 font-size: 2em;
 font-weight: bold;
//Component Class
private changedFont: string = "btnFont";

结果却变成了这样:

我们预先设置好的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类型的变量。 (不推荐使用这种方式)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

微信小程序免费_解析Angular 2+ 样式绑定方式

分析Angular 2+ 款式关联方法 本文关键详细介绍掌握析Angular 2+ 款式关联方法,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一下吧前言开发设计...

2021-01-08
广州凡科互联网科技股份有限公司招聘天猫运营

招聘人数:12职位信息岗位职责:1. 负责天猫店铺的整体规划、建立、营销、推广等系统经营性工作;2. 负责天猫店铺各种促销及营销策划,使商品促销实现多样化、内容化、品牌化经营...

2021-01-08
分销微信小程序_javascript完成最长公共子序列实例

javascript完成最多公共性子编码序列案例编码 mon sequence)mon substring)并不是一件事情儿,下边本文关键给大伙儿详细介绍了有关javascript完成最多公共性子编码序列的有关材料,必...

2021-01-08
展览会微信小程序_vue页面跳转后返回原页面初始

vue网页页面自动跳转后回到原网页页面原始部位方式 下边网编就为大伙儿共享一篇vue网页页面自动跳转后回到原网页页面原始部位方式,具备非常好的参照使用价值,期待对大伙...

2021-01-08
网站设计公司如何解决网站加载时间缓慢

    客户讨厌等候時间载入长的网页页面,网页页面速率再用户感受中起主要要功效,但很人忽视了速率提升,危害网站载入時间的重要要素有下列好多个。1、网络服务器网络服务器特...

2021-01-08
广州凡科互联网科技股份有限公司招聘天猫推广

招聘人数:7职位信息工作内容 :1、制定直通车/钻展推广/超级推荐投放计划并执行,根据推广数据实时优化调整,完成店铺销售目标,调控ROI;2、负责付费推广数据持续跟踪和评估,...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信