angular 自定义组件中实现双向绑定

在自定义中,常常要使用到自定义双向绑定,那么要怎么做呢?其实代码也很简单,先直接来看代码
定义双向绑定代码:

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';

@Component({
    selector: 'app-my-model',
    templateUrl: './my-model.component.html',
    styleUrls: ['./my-model.component.scss']
})
export class MyModelComponent implements OnInit {
    /**
     * 自定义model变量
     */
    private _myModel;
    /**
     * 返回父组件变化后的值
     */
    @Input()
    get myModel() {
        return this._myModel;
    }

    /**
     * 组件值产生变化后父组件改变
     * @param value
     */
    set myModel(value) {
        this._myModel = value;
        this.myModelChange.emit(value);
    }
    @Output()
    myModelChange: EventEmitter<any> = new EventEmitter();

    constructor() {
    }

    ngOnInit() {
    }
}

使用

<app-my-model [(myModel)]="myModel"></app-my-model>

步骤:
1.自定义一个变量,如myModel
2.为变量设置get/set方法
3.在get方法上增加@Input()注解用于返回父组件变化后的值,创建output绑定事件,由组件绑定事件EventEmitter向父组件传输信息。
4.修改set方法，在set方法中增加“发射”事件方法，如this.myModelChange.emit(value);

注意: 属性名 + 后缀 Change是一个双向绑定的固定写法,使用时，就可以通过[(myModel)]=“我的变量” 进行双向绑定了。当然，如果想要做事件和属性绑定拆分也是可以的，用法如下：

<app-my-model [myModel]="myModel" (myModelChange)="onMyModelChange($event)"></app-my-model>

这里方法的第一个参数必须是"event"比较特殊,它表示的是我们在组件中emit的值。在ts中：

onMyModelChange(value: any) {
        this.myModel = value;
}