jay_mw

Angular2+ 双向数据绑定

我们经常需要显示数据属性，并在用户作出更改时更新该属性。

在元素层面上，既要设置元素属性，又要监听元素事件变化。

Angular 为此提供一种特殊的双向数据绑定语法：[(x)]。 [(x)]语法结合了属性绑定的方括号[x]和事件绑定的圆括号(x)。

当一个元素拥有可以设置的属性x和对应的事件xChange时，解释[(x)]语法就容易多了。下面的SizerComponent符合这个模式。它有size属性和伴随的sizeChange事件：

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-sizer',
  template: `
  
    
    
    FontSize: {{size}}px
  `
})
export class SizerComponent {
  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}

size 的初始值是一个输入值，来自属性绑定。（译注：注意 size 前面的 @Input ）点击按钮，在最小/最大值范围限制内增加或者减少 size 。然后用调整后的 size 触发 sizeChange 事件。


Resizable Text

双向绑定语法实际上是属性绑定和事件绑定的语法糖。 Angular将 SizerComponent 的绑定分解成这样：

$event变量包含了SizerComponent.sizeChange事件的荷载。 当用户点击按钮时，Angular 将$event赋值给AppComponent.fontSizePx。

显然，比起单独绑定属性和事件，双向数据绑定语法显得非常方便。

我们希望能在像和