简介ngx开发到现在已经一年半了（angular2+以后直接叫ngx）。开发之初使用的是angular2RC版，现已发布。Angular5来了，时光飞逝！ngx从设计之初就是一个基于组件的框架，所以它是一个大到一个页面，小到一个按钮的组件。这涉及到组件的重用。在设计公共组件时，动态样式绑定是必不可少的。回过头来看，angular确实为我们提供了几种绑定属性的方式。接下来，让我们仔细看看如何在组件中使用样式绑定。stylebinding[style.propertyName]我们有一个按钮，默认样式是bootstrap的primary，如果按钮的大小在不同的页面不一样，那么就需要动态绑定按钮的字体大小，可以使用[style.propertyName]来实现。模板中的代码StyleBindingComponent类中的代码privatefontSize:string="2em";结果如图：如果我们还需要动态设置按钮的边框半径border-radius，则模板中的代码变为：StyleBindingComponent类中的代码变为：privatefontSize:string="2em";私人边界半径：字符串=“10px”；结果变成：使用[style.propertyName]绑定样式属性还不错，但是一旦有新的需求，我们需要继续添加我们需要绑定的属性。这时候组件上绑定的属性就会越来越多。有没有办法让我们创建一个对象来存储我们需要绑定的属性呢？？当然，[ngStyle]可以帮助我们做到这一点。[ngStyle]所以在上面的例子中，我们可以直接使用[ngStyle]来动态绑定按钮的font-size和border-radius。模板中的代码变为：StyleBindingComponent类中的代码变为：privatebtnStyle:any={borderRadius:"10px",fontSize:"2em"};结果是：[style.propertyName]vs.[ngStyle][style.propertyName]一次只能绑定一个属性，而[ngStyle]可以同时绑定多个属性当[style.propertyName]和[ngStyle时]绑定了同一个属性，比如需要动态修改font-size，[style.propertyName]会覆盖[ngStyle]中的同一个属性。当然，除了样式绑定，我们还可以使用类绑定来动态修改样式。classbinding[class.className]使用这个方法，我们可以根据绑定变量的值动态添加或删除css类。还是用刚才的按钮例子。那么代码就变成了：//templateStyleBinding//CSS.btnBorder{border-color:green;border-radius:10px;}//组件类privatechangeBorder:boolean=true;结果如图：字体有点小，我们动态添加一个class来改变字体：my这时候代码就变成了：//template样式绑定//CSS.btnBorder{border-color:green;边界半径：10px；}。btnFont{字体大小：2em;font-weight:bold;}//组件类privatechangeBorder:boolean=true;privatechangeFont:boolean=true;结果如图：[ngClass]就像[ngStyle]，angular也为我们提供了一个指令[ngClass]被添加来动态绑定多个css类。那么我们可以使用[ngClass]重构上面的代码>//CSS.btnBorder{边框颜色：绿色；border-radius:10px;}.btnFont{字体大小:2em;font-weight:bold;}//组件类privatechangeBorder:boolean=true;privatechangeFont:boolean=true;结果还是：[ngClass]需要绑定一个对象，key是css类名，value是绑定的变量。[class.className]与[ngClass][class.className]一次只能绑定一个CSS类。而[ngClass]可以同时绑定多个CSS类。当[class.className]和[ngClass]需要动态修改相同的样式时，比如都需要动态修改font-size，[class.className]会覆盖[ngClass]中统一的样式。[className]angular还提供了一种绑定方式，就是直接通过修改元素的className来动态改变样式。但是我不推荐这种使用方式，为什么不呢？请参见下面的示例//template样式绑定//CSS.btnBorder{border-color:green;border-radius:10px;}.btnFont{字体大小:2em;font-weight:bold;}//组件类privatechangedFont:string="btnFont";结果变成了这样：我们预设的bootstrap的primary被移除了，因为[className]会添加动态绑定的类名，然后移除任何以前的类名。所以这种绑定方式是非常危险的，因为对于一个组件来说，我们通常会有很多类型来共同控制样式。[className]在通用组件中的使用已被高度弃用。总结最后总结一下angular中各种样式绑定的特点和区别：[style.propertyName]直接绑定一个string类型的样式值，或者string类型的变量。具有最高优先级并将覆盖现有样式属性。[ngStyle]绑定一个样式组合的对象，key为css属性名，value为对应的样式值，或者字符串类型的变量。[class.className]直接绑定true/false，或者boolean类型的变量。[ngClass]绑定一个CSS类名组合的对象，key为CSS类名，value为true/false或boolean类型的变量。[className]直接绑定css类名，或者字符串类型的变量。（不推荐此方法）
