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>

这样写效果也是一样的.