[()]的语法暗示了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.