在自定義中,常常要使用到自定義雙向綁定,那么要怎么做呢?其實代碼也很簡單,先直接來看代碼
定義雙向綁定代碼:

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;
    }

    /**
     * 組件值產(chǎn)生變化后父組件改變
     * @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.為變量設(shè)置get/set方法
3.在get方法上增加@Input()注解用于返回父組件變化后的值,創(chuàng)建output綁定事件,由組件綁定事件EventEmitter向父組件傳輸信息。
4.修改set方法，在set方法中增加“發(fā)射”事件方法，如this.myModelChange.emit(value);

注意: 屬性名 + 后綴 Change是一個雙向綁定的固定寫法,使用時，就可以通過[(myModel)]=“我的變量” 進行雙向綁定了。當(dāng)然，如果想要做事件和屬性綁定拆分也是可以的，用法如下：

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

這里方法的第一個參數(shù)必須是"event"比較特殊,它表示的是我們在組件中emit的值。在ts中：

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