關於angular2雙向綁定

1、在自己寫的anular組件中可以使用[(x)]的語法，可以分屬性x還有時間xChange，詳見官方文檔-模板語法-雙向數據綁定

 

2、在原生html元素不能使用[(x)]語法，但是angular提供了ngModel指令來實現了某些表單元素的雙向綁定

 

3、關於自定義表單組件

對於前面兩種的理解：只要使用了ngModel，就會隱式創建formControl

關於自定義表單組件：有angular已經實現值訪問器的angular表單，也可以有自定義組件的angular表單，如果是自定義組件表單，組件就需要實現ControlValueAccessor

什么是ControlValueAccessor：它是原生元素和Angular表單之間的橋梁，將組件或者指令繼承ControlValueAccessor的接口就能變成Angular表單使用了。

理解：https://blog.csdn.net/fen747042796/article/details/78880409

使用：

https://segmentfault.com/a/1190000009070500#articleHeader1

https://segmentfault.com/a/1190000012726935

https://www.jianshu.com/p/727ddad21586

實現ControlValueAccessor重寫三個方法：

• writeValue(obj: any)：該方法用於將模型中的新值寫入視圖或 DOM 屬性中。也就是formcontrol的值變化后，會執行這個方法。

• registerOnChange(fn: any)：設置當控件接收到 change 事件后，調用的函數。fn為傳入的一個改變formcontrol值的方法，把它傳遞給該自定義組件，在組件值變化時，調用這個changeFn(當然，registerOnChange作用就是要把fn引用賦值保存下來，便於組件使用)。其實打debugger可以看到，這里的fn是forms的setUpViewChangePipeline方法。

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

 

• registerOnTouched(fn: any)：設置當控件接收到 touched 事件后，調用的函數。同上，只不過傳入的fn不一樣。