angular元件雙向繫結

摘要： 在寫專案時，需要編寫一個元件,根據使用者選擇的單選框返回值,就像元件的雙向繫結。 元件的雙向繫結就是子元件接受父元件的資料,父元件監聽子元件的事件來修改自己的值. 子元件 定義事件發射器 @Output('stateChange') instrument...

在寫專案時，需要編寫一個元件,根據使用者選擇的單選框返回值,就像元件的雙向繫結。

元件的雙向繫結就是子元件接受父元件的資料,父元件監聽子元件的事件來修改自己的值.

子元件

定義事件發射器

@Output('stateChange')
instrumentStateChange = new EventEmitter<number>();

暴露一個stateChange屬性,當state值變化時,就把state值發射給父元件。

定義輸入屬性

@Input('state')
set instrumentState(state: number) {
this.instrumentStateChange.emit(state);
this._instrumentState = state;
}

定義一個輸入屬性，當他的值變化時，就用時間發射器將值發射出去

父元件

<app-instrument-state [state]="state" (stateChange)="changeState($event)"></app-instrument-state>
<p>當前狀態:{{state}}</p>

定義一個屬性傳輸資料,一個方法修改屬性值

changeState(event: any) {
this.state = event;
}

效果:

雙向繫結語法糖

雙向繫結語法 [(state)]=state 等價於 => [state]=state (stateChange)="state=$event"

採用雙向繫結語法，就不用定義監聽的函數了，方便使用.

<app-instrument-state [(state)]="state"></app-instrument-state>
<p>當前狀態:{{state}}</p>

這樣寫效果也是一樣的.