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>

其中,elementngStyle指令所在的 DOM 元素。styleNames是样式名字,例如colorfont-size等,也可以添加额外的后缀作为单位,如top.pxfont-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>

style 绑定和ngStyle指令可以接受的 CSS 单位后缀可以是emex%pxcmmminptPC等。

ngClass指令

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

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

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

expression是字符串时,该字符串会被直接赋值给elementclass属性。例如:

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

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

上面的代码,将redsize20两个 class 添加到了<div>元素。

注意:我们使用[ngClass]指令时,添加了[]。但实际上,如果expression是一个简单字符串,那么就可以使用插值绑定,而不需要属性绑定,例如:

<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 绑定等。下一章,我们将介绍单向数据绑定的另外一个方向,从视图到组件的绑定。

Leave a Reply