2017-01-24 44 views
0

我有一個巨大的模型驅動的形式,其它字段可能影響彼此的行爲,例如,以訂閱:角2 - 太多可觀測量在ngOnInit()

如果字段中的變化,場B的值值應當從服務器中獲得,或者,如果的C區域的變化值,現場d應被禁用&等

爲了檢測我使用valueChanges的更改:

this.form.controls['a'].valueChanges.subscribe(data=>{ 
    //do some staff 
}); 
this.form.controls['b'].valueChanges.subscribe(data=>{ 
    //do some staff 
}); 
. 
. 
. 

(注意我不能說this.form.valueChanges,因爲我的表格有大約50個字段)。一切看起來不錯,但這種做法使我的ngOnInit()有點混亂。我的問題是:

是否有情況類似這樣的訂閱在ngOnInit太多的觀測沒有任何問題的任何好/比較有效的解決方案如何提高我的代碼??

回答

1

這將是清潔劑在模板中使用的角度event binding。將它與ngModel結合起來用於雙向數據綁定,它可以使你的組件代碼更加清潔。

例如:

<input type="text" formControlName="a" [(ngModel)]="inputValue" (change)="doSomething($event)"> 

你可以做event binding在Angular2對於DOM事件,如changeclickkeyupblur

編輯:

  • change被炒魷魚只有在輸入文本框外單擊。
  • keyup是比較change一個更好的選擇。

看到這個Plunk比較差異。

+0

使用(其他城市)將被推遲,在這裏看看:http://stackoverflow.com/a/34616143/4221872 –

+1

其實'change'事件僅在'blur'解僱。如果你想在你鍵入的時候觸發事件,那麼你可以使用'keyup','keyup'和'valueChanges.subscribe'之間的延遲可以忽略不計。我已經把一個[普拉克(http://plnkr.co/edit/1glzZEvFmO08IUwTIbAQ?p=preview)爲您驗證這一點。 [http://plnkr.co/edit/1glzZEvFmO08IUwTIbAQ?p=preview](http://plnkr.co/edit/1glzZEvFmO08IUwTIbAQ?p=preview) –

+0

還編輯我的上述響應。 –