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: `
  <div>
    <button (click)="dec()" title="smaller">-</button>
    <button (click)="inc()" title="bigger">+</button>
    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
  </div>`
})
export class SizerComponent {
  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  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事件。

<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

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

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

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

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

我们希望能在像<input>和<select>这样的 HTML 元素上使用双向数据绑定。 可惜，原生 HTML 元素不遵循x值和xChange事件的模式。

幸运的是，Angular 以 NgModel 指令为桥梁，允许在表单元素上使用双向数据绑定。

在个人封装模块组件的时候，需要注意：输入参数 x 和  输出方法xChange对应，不然双向绑定也不会成功

在angular中操作的属性是 DOM属性 property  而不是操作的HTML属性 attribute

[(ngModel)]内幕

<input
  [ngModel]="currentHero.name"
  (ngModelChange)="currentHero.name=$event">

--strictNullChecks  严格空值检查   TypeScript就会确保不存在意料之外的null或undefined。