解析Angular 2+ 样式绑定方式(3)

而 [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中各种样式绑定的特点和区别：

1. [style.propertyName] 直接绑定一个string类型的样式值，或者string类型的变量。优先级最高，会覆盖已有的样式属性。
2. [ngStyle]绑定一个样式组合的object，key是css属性名，value是对应的样式值，或者string类型的变量。
3. [class.className] 直接绑定true/false, 或者boolean类型的变量。
4. [ngClass]绑定一个css类名组合的object，key是css类名，value是true/false 或者boolean类型的变量。
5. [className] 直接绑定css类名，或者string类型的变量。 （不推荐使用这种方式）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。