【Angular】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类型的变量。 （不推荐使用这种方式）