<input [(ngModel)]="value"/>

等價於

<input [ngModel]="value" (ngModelChange)="valueChange($event)"/>

    那麼我們如何實現自定義自己的元件，該元件也可以接受[(ngModel)]來實現雙向繫結呢？首先來看元件的定義程式碼：

@Component({
  selector: 'app-two-way',
  template: `<input [(ngModel)]="value">`,
  styleUrls: ['./two-way.component.css'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TwoWayComponent),
    multi: true,
  }],
})
export class TwoWayComponent implements ControlValueAccessor {
  private innerValue: any = '';
  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;

  get value(): any {
    return this.innerValue;
  };

  set value(v: any) {
    if (v !== this.innerValue) {
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }

  writeValue(value: any): void {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

}
 

    這樣在template中使用該元件的時候就可以類似於input標籤一樣可以接受ngModel和ngModelChange了。下面來解釋其中使用的東西：

• NG_VALIDATORS:為form control提供ControlValueAccessor，所以我們的元件要實現ControlValueAccessor介面。
  
• useExisting：避免出現多個provider
  
• forwardRef：在依賴注入中，每個元件都需要有個與其關聯的token，可是在provider註冊的時候，我們的元件還沒有初始化。所以需要使用forwardRef來告知provider構造器這些，使其可以等元件初始化。
  

接下來就是實現ControlValueAccessor介面，主要的函式是：

• writeValue：將外部傳遞進來的值寫到模板中
• registerOnChange：該函式接收一個回撥函式，用於在資料發生變化時告知外面的世界。

    在元件定義中，我們定義了onTouchedCallback和onChangeCallback，但是方法都是沒有任何實現的，這個定義時必須的。而且這兩個方法的真正實現都會在元件初始化時由Angular自己來提供。所以我們不必擔心這兩個方法沒有任何實現的。