详解Angular中实现自定义组件的双向绑定的两种方法

interface ControlValueAccessor { 
 writeValue(obj: any): void
 register (fn: any): void
 registerOnTouched(fn: any): void
}

import { ControlValueAccessor } from \'@angular/forms/src/directives\';
import { Component, forwardRef, Input } from \'@angular/core\';
import { NG_VALUE_ACCESSOR } from \'@angular/forms\';

@Component({
 selector: \'custom-input\',
 template: `<input [(ngModel)]=\"value\"/>`,
 providers: [
  {
   provide: NG_VALUE_ACCESSOR,
   useExisting: forwardRef(() => UnionInputComponent),
   multi: true
  }
 ]
})
export class CustomInputComponent implements ControlValueAccessor {
 constructor() { }
 private innerValue: any = \'\';
 private onTouchedCallback: () => void = function () { };
 private  Callback: (_: any) => void = function () { };

 get value(): any {
  return this.innerValue;
 }
 set value(v: any) {
  if (v !== this.innerValue) {
   this.innerValue = v;
   this. Callback(v);
  }
 }
 /**
  * model view -> view value
  */
 writeValue(value: any) {
  if (value !== this.innerValue) {
   this.innerValue = value;
  }
 }
 /**
  * view value ->model value
  */
 register (fn: any) {
  this. Callback = fn;
 }
 registerOnTouched(fn: any) {
  this.onTouchedCallback = fn;
 }
}

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

@Component({
 selector: \'custom-input\',
 template: `<input [(ngModel)]=\"innerValue\"/>`,
})
export class CustomInputComponent {
 innerValue;

 @Input()
 get twoWayModel() {
  return this.innerValue;
 }
 set twoWayModel(val) {
  this.innerValue = val;
  this.twoWayModelChange.emit(this.innerValue);
 }
 @Output() twoWayModelChange: EventEmitter<string> = new EventEmitter</string><string>();
}

import { Input, Output } from \'@angular/core\';
import { Component, forwardRef, Input } from \'@angular/core\';
@Component({
 selector: \'custom-input\',
 template: `<custom -input [(twoWayModel)]=\"inputValue\" (twoWayModelChange)=\"onInputValueChange($event)\"></custom>`
})
export class abcComponent {
 inputValue;
 onInputValueChange(val) {
  console.log(val);
  console.log(val === this.inputValue); // true
 }
}