[(ngModel)]的實現原理

討論[(ngModel)]以前，先講下屬性綁定和事件綁定。

 

在屬性綁定中，值從模型中流動到視圖上的目標屬性。[]，經過把屬性名放在方括號中來標記出目標屬性。這是從模型到視圖的單向數據綁定。

 

在事件綁定中，值從視圖上的目標屬性流動到模型。()，經過把屬性名放在圓括號中來標記出目標屬性。這是從視圖到模型的（反向的）單向數據綁定。

 

因此，組合[]和()就能夠實現雙向數據綁定和雙向數據流。

 

事實上，咱們也能夠把NgModel綁定拆分紅兩個獨立的綁定，屬性綁定和事件綁定。

eg：

NgModel綁定

<input type="text" class="form-control" id="name" required [(ngModel)]="name" name="name">

解析：[(ngModel)]綁定組件屬性name。

 

改用屬性綁定和事件綁定

1 <input type="text" class="form-control" id="name" required           
2     [ngModel]="name" name="name"
3     (ngModelChange)="name = $event" >

解析：

[(ngModel)]爲屬性綁定，綁定組件屬性name。

 

(ngModelChange)爲事件綁定，看起來可能有點怪。如今來解釋下。

由於ngModelChange並不是<input>元素的事件。它實際來自NgModel指令的事件屬性。當Angular在表單中看到[(x)]的綁定目標時，它會期待這個x指令有一個名爲x的輸入屬性，和一個名爲xChange的輸出屬性。

把這裏的x替換成ngModel，就能夠理解得通了。

還有一個一開始看得有點蒙圈的地方，是模板表達式中的model.name = $event。咱們理解的$event對象一幫來自DOM事件。但ngModelChange屬性不會生成DOM事件，由於它是Angular EventEmitter類型的屬性。當它觸發時，$event返回的是輸入框的值，也正是但願賦給組件name屬性的值。

 

總結：在實踐中，咱們優先使用[(ngModel)]形式的雙向綁定，只有當時間處理函數須要處理合並或限制按鍵頻率等特殊狀況時，纔會將雙向數據拆分開來，改爲獨立的事件處理函數（即改爲上面的代碼二方式來實現）。

 

注意：

當在表單中使用[(ngModel)]時，必需要定義name屬性。

 

這是我學習angular2雙向數據綁定時的筆記和看法，可能理解得還不夠透徹，之後可能還要對它進行修繕，先打個印記吧!  O. O