Angular[()]的语法暗示了element具有一个可以赋值的名为x的property，以及一个对应的xChange事件。
一个例子：
import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-sizer', templateUrl: './sizer.component.html', styleUrls: ['./sizer.component.css'] }) 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 Component的size属性加上了@Input注解，使得parent Component在显示它的时候，可以进行property binding. sizeChange通过@Output修饰，这样可以给external receiver发送event.
parent Component的fontSizePx同child Component的size property进行双向绑定。
<app-sizer [(size)]="fontSizePx"></app-sizer> <div [style.font-size.px]="fontSizePx">Resizable Text</div>
AppComponent的fontSizePx通过双向绑定的方式关联到了SizerComponent.
这个[(size)]的语法只是一个语法糖，实际会被转换成如下代码：
<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
The $event variable contains the payload of the SizerComponent.sizeChange event. Angular assigns the $event value to the AppComponent.fontSizePx when the user clicks the buttons.
