解析Angular 2+ 样式绑定方式

引言 开发ngx（angular 2+ 以后都直接称为ngx）也有1年半的时间了，刚开始开发的时候使用的还是angular2 RC版，现在已经出angular5了，时光飞逝啊！ ngx从设计之初就是一个component-based的框架，所以大到一个页面，小到一个按钮，都是一个component。 这就涉及到了组件的重用，设计通用组件的时候，必不可少的就是动态的样式绑定。 回头想想， angular还真是给我们提供了好几种属性绑定的方式呢。 接下来我们就来具体看看如果在组件中使用样式绑定。 style binding [style.propertyName] 我们有一个button， 在Angular 2+（通常简称为Angular或ngx）中，样式绑定是实现组件动态样式的关键技术，这在组件重用和构建通用组件时尤为重要。Angular提供了多种方式来绑定组件的样式，包括`[style.propertyName]`、`[ngStyle]`以及`[class.className]`。 我们来看`[style.propertyName]`的使用。这种绑定方式允许你直接针对某个CSS样式属性进行绑定。例如，如果你有一个按钮组件，想要动态地改变其字体大小和边框半径，你可以这样做： ```html <button class="btn btn-primary" [style.fontSize]="fontSize" [style.borderRadius]="borderRadius"> Style Binding </button> ``` 在对应的组件类中，你需要定义相应的属性并赋值： ```typescript private fontSize: string = "2em"; private borderRadius: string = "10px"; ``` 然而，当需要绑定的样式属性增多时，这种方式会导致模板中的属性绑定变得冗长。此时，`[ngStyle]`就派上用场了。它接受一个对象，该对象的键是CSS属性名，值是对应的属性值。例如： ```html <button class="btn btn-primary" [ngStyle]="btnStyle"> Style Binding </button> ``` 组件类中的代码： ```typescript private btnStyle: any = { borderRadius: "10px", fontSize: "2em" }; ``` 这样，你就可以在一个对象中管理所有需要绑定的样式属性，使得代码更整洁。 接下来是`[class.className]`，这种绑定方式用于根据组件数据动态地添加或移除CSS类。比如，你可能有一个按钮，需要根据某个条件改变其边框颜色和字体大小： ```html <button class="btn btn-primary" [class.btnBorder]="changeBorder" [class.btnFont]="changeFont"> Style Binding </button> ``` 在CSS中定义这些类： ```css .btnBorder { border-color: green; border-radius: 10px; } .btnFont { font-size: 2em; font-weight: bold; } ``` 在组件类中： ```typescript private changeBorder: boolean = true; private changeFont: boolean = true; ``` 这样，根据`changeBorder`和`changeFont`的布尔值，按钮将相应地添加或移除对应的类，从而改变样式。 需要注意的是，当`[style.propertyName]`和`[ngStyle]`同时存在并且都绑定了同一属性时，`[style.propertyName]`的设置会覆盖`[ngStyle]`中的设置。对于`[class.className]`，它允许你根据多个条件动态地应用多个类。 Angular的样式绑定机制提供了强大的灵活性，使得你可以根据组件的状态和业务逻辑动态地改变组件的外观。通过合理利用`[style.propertyName]`、`[ngStyle]`和`[class.className]`，你可以构建出适应性强、表现丰富的组件。