解析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中代码
<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 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。
那么我们可以使用[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 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
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的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类型的变量。 （不推荐使用这种方式）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。