Angular 学习之路 09 – 数据绑定（3）

之前反复强调过，Angular 属性绑定使用 property。除此之外，Angular 也提供了几种特殊的绑定：class 和 style 的绑定以及 attribute 绑定。

绑定到 class 和 style 很特殊，是因为它们通常包含 CSS 类列表和其它的样式。这种绑定必须非常灵活，以满足页面的各种样式需要。普通的属性绑定覆盖了全部的 property，但不包括 HTML attribute。如果我们需要绑定到 HTML attribute，就需要 attribute 绑定。

style 绑定

style 绑定与 property 绑定语法类似：

[style.style-property] = "style-value"

style 绑定也是使用[]标记。[]中的CSS 属性名前面需要添加style.前缀。例如：

<p [style.color]="'red'">Give me red</p>
<p [style.background-color]="'grey'">some paragraph with grey background</p>
<button [style.border]="'5px solid yellow'">Save</button>

style 绑定可以使用类成员变量，可以使用条件判断，也可以使用函数：

@Component({
  selector: 'app-my',
  template: `
    <button [style.color]="status=='error' ? 'red': 'blue'">Button 1</button>
    <button [style.color]="getColor()">Button 2</button>
  `,
  styles: [
  ]
})
export class MyComponent {
  status: string = 'error';

  getColor() {
    return 'yellow';
  }
}

很多样式，比如width以及font-size，是有自己的单位的。style 绑定也可以直接指定单位：

<button [style.font-size.px]="'20'" >Big Button</button>
<button [style.fontSize.px]="'20'" >Big Button</button>

注意上面的代码，CSS 属性font-size既可以写做[style.font-size]，也可以写做[style.fontSize]。

如果需要绑定多个样式，可以使用多个 style 绑定：

<p [style.color]="getColor()" 
   [style.font-size.px]="'20'"      
   [style.background-color]="status=='error' ? 'red': 'blue'">
   paragraph with multiple styles
</p>

但是，一次写这么多 style 绑定也挺麻烦的。好在 Angular 为我们提供了另外一种设置方式：ngStyle 指令。

ngStyle指令

指令是一种特殊的 Angular 命令。Angular 组件可以理解为新定义的 HTML 元素，指令则可以理解为为已有的 HTML 元素增加新的属性或行为。ngStyle就是一种指令。它可以使用表达式，为其所在元素增加 style 样式。表达式在运行时计算，可以动态修改元素样式。ngStyle指令语法如下：

<element [ngStyle]="{'styleNames': styleExp}">...</element>

其中，element是ngStyle指令所在的 DOM 元素。styleNames是样式名字，例如color、font-size等，也可以添加额外的后缀作为单位，如top.px、font-style.em等。styleExp表达式计算结果被赋值给styleNames。'styleNames': styleExp可以有多个，之间使用逗号分隔。

ngStyle指令使用示例如下：

<p [ngStyle]="{'font-size': '20px'}">Set Font size to 20px</p>
<p [ngStyle]="{'font-size.px': '20'}">Set Font size to 20px</p>
<p [ngStyle]="{'color': 'purple',
               'font-size': '20px',
               'font-weight': 'bold'}">
     Multiple styles
</p>

ngClass指令

与ngStyle指令类似，ngClass指令可以使用表达式在运行时改变元素的 CSS class，其语法如下：

<element [ngClass]="expression">...</element>

其中，element是ngClass指令所在的 DOM 元素。expression的运算结果将直接影响到元素的 CSS class。expression可以是字符串、数组或者对象。

当expression是字符串时，该字符串会被直接赋值给element的class属性。例如：

<style>
.red { color: red; }
.size20 { font-size: 20px; }
</style>

<div [ngClass]="'red size20'"> Red Text with Size 20px </div>

上面的代码，将red和size20两个 class 添加到了<div>元素。

<div ngClass="red size20"> Red Text with Size 20px </div>

一次赋值多个 class，除了上面使用字符串，也可以使用数组，例如：

<div [ngClass]="['red','size20']">Red Text with Size 20px </div>

ngClass指令也可以接受对象，其语法如下：

<element [ngClass]="{'cssClass1': true, 'cssClass2': true}">...</element>

此时，对象的键将作为 CSS 类名，所有值为true的键的名字都会赋值给 CSS 的 class 属性。例如，上面的代码可以写做：

<div [ngClass]="{'red':true,'size20':true}">Red Text with Size 20px</div>

ngClass指令绑定到组件类的属性，当改变属性值时，就可以实现动态 class 赋值。

attribute 绑定

对于那些没有 property 的 HTML attribute，例如aira或者 SVG，则需要使用 attribute 绑定，例如：

<button [attr.aria-label]="closeLabel">X</button>

对于 attribute 绑定，需要添加attr.作为前缀。

至此，我们已经将从组件到视图的单向数据绑定介绍完了。回顾一下，Angular 一共提供了两种从组件到视图的单向数据绑定：插值和属性绑定。另外，还为特殊目的的绑定提供了额外的写法，例如 style 绑定、attribute 绑定等。下一章，我们将介绍单向数据绑定的另外一个方向，从视图到组件的绑定。