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。