时间:2021-05-18
引言
开发ngx(angular 2+ 以后都直接称为ngx)也有1年半的时间了,刚开始开发的时候使用的还是angular2 RC版,现在已经出angular5了,时光飞逝啊!
ngx从设计之初就是一个component-based的框架,所以大到一个页面,小到一个按钮,都是一个component。
这就涉及到了组件的重用,设计通用组件的时候,必不可少的就是动态的样式绑定。
回头想想, angular还真是给我们提供了好几种属性绑定的方式呢。
接下来我们就来具体看看如果在组件中使用样式绑定。
style binding
[style.propertyName]
我们有一个button,默认的样式是bootstrap的primary,
假如在不同的页面中按钮的大小要不同,这个时候就需要动态绑定button的字体大小,可以使用[style.propertyName]来实现。
template中代码
<button class="btn btn-primary" [style.fontSize]="fontSize"> Style Binding</button>Component类中代码
private fontSize: string = "2em";结果如图:
假如我们还需要动态设置button的边框半径border-radius,
template中代码则变为:
<button class="btn btn-primary" [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 class="btn btn-primary" [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="btn btn-primary" [class.btnBorder]="changeBorder" > Style Binding</button>//CSS.btnBorder { border-color: green; border-radius: 10px;}//Component Classprivate changeBorder: boolean = true;结果如图:
看着字体有点小啊,我们再动态添加一个改变字体的class:my
这个时候代码就变为了:
//template<button class="btn btn-primary" [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 Classprivate changeBorder: boolean = true;private changeFont: boolean = true;结果如图:
[ngClass]
像[ngStyle]一样,angular也给我们提供了一个指令[ngClass]来动态绑定多个css class。
那么我们可以使用[ngClass]对上面的代码重构一下
//template<button class="btn btn-primary" [ngClass]= "{'btnFont': changeFont, 'btnBorder': changeBorder}"> Style Binding</button>//CSS.btnBorder { border-color: green; border-radius: 10px;}.btnFont { font-size: 2em; font-weight: bold;}//Component Classprivate 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 class="btn btn-primary" [className]="changedFont"> Style Binding</button>//CSS.btnBorder { border-color: green; border-radius: 10px;}.btnFont { font-size: 2em; font-weight: bold;}//Component Classprivate changedFont: string = "btnFont";结果却变成了这样:
我们预先设置好的bootstrap的primary被移除了, 就是因为[className]会添加动态绑定的类名,然后移除之前所有的类名。
所以这种绑定方式是很有危险性的,因为针对一个组件,我们通常都会有很多种类来共同控制样式。
在通用组件中,非常不推荐使用[className]。
总结
最后再来总结下angular中各种样式绑定的特点和区别:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
大致介绍Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为:1、属性绑定和插值表达式组件类->模板2、事件绑定:模板->组件类3、双向绑定
前言以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式。有2种方式分析,1:不用插件,2:用插件(引入react
众所周知,在Angular中ngModel为动态双向绑定,存在两种方式。例如,方式一:在html中,Check!{{searchText}}在controlle
angular2在双向数据绑定时[(ngModel)]无法使用,出现的错误是:Can'tbindto'ngModel'sinceitisn'taknownpro
一、绑定初始化,自动加载通过绑定来进行angular的初始化,会把js代码侵入到html中。ng-app是angular的一个指令,代表一个angular应用(