【Angular】Angular 2+ 样式绑定解析
引言开发ngx(angular 2+ 以后都直接称为 style binding[style.propertyName]我们有一个button,默认的样式是 假如在不同的页面中按钮的大小要不同,这个时候就需要动态绑定button的字体大小,可以使用 template中代码 <button class="btn btn-primary" [style.fontSize]="fontSize"> Style Binding </button> Component类中代码 private fontSize: string = "2em"; 结果如图:
假如我们还需要动态设置button的边框半径 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]来绑定样式属性固然不粗,可是一旦有新的需求,我们就需要继续加上我们需要绑定的属性, 这个时候组件上绑定的属性就会越来越多,我们有没有办法来创建一个 [ngStyle]所以上面的例子,我们就可以直接使用 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]每次只能绑定一个属性 当然除了style binding,我们还可以使用class binding来动态修改样式。 class binding[class.className]使用这种方式,我们可以根据绑定变量的值来动态添加或者移除css class。 则代码变为: //template <button class="btn btn-primary" [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="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 Class private changeBorder: boolean = true; private changeFont: boolean = true; 结果如图:
[ngClass]像[ngStyle]一样,angular也给我们提供了一个指令[ngClass]来动态绑定多个css class。 //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 Class private changeBorder: boolean = true; private changeFont: boolean = true; 结果依旧为:
[ngClass]需要绑定一个object,key是css类名, value是绑定的变量。 [class.className] vs. [ngClass][class.className]每次只能绑定一个CSS类。 [className]angular还提供一种绑定方式,就是直接通过修改元素的 //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 Class private changedFont: string = "btnFont"; 结果却变成了这样:
我们预先设置好的bootstrap的 总结最后再来总结下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类型的变量。 (不推荐使用这种方式) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |