angular組件雙向綁定

在寫項目時，須要編寫一個組件,根據用戶選擇的單選框返回值,就像組件的雙向綁定。

組件的雙向綁定就是子組件接受父組件的數據,父組件監聽子組件的事件來修改本身的值.

子組件

定義事件發射器

@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>

這樣寫效果也是同樣的.