解析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"
};