我们经常需要显示数据属性,并在用户作出更改时更新该属性。
在元素层面上,既要设置元素属性,又要监听元素事件变化。
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>
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。