EnriqueMark
Angular

雙向繫結回歸單向

2026-04 繁體中文

雙向繫結的模板寫法,在Angular裡其實算是個一次性的語法糖,本質上就是一次性繫結資料,資料變動觸發事件回調並更新的操作,給全部封裝在了一起,那就是預設的香蕉盒子寫法。

而這個當然是可以自主控制的。也就是説,我可以在需要的時候,手動回歸這種「繁瑣」的單向資料流機制,主動讓事件回調指向我自己的方法,以讓整個過程可以由我進行更高顆粒度的控制。

預設寫法有很明確的適用前提,即兩邊都是可以直接修改的物件,否則直接反向回去更新就會直接出錯。或者説我就是希望對回傳的資料進行一些自定義的預處理,那這種情況下就要主動控制了。

  <input 
    type="text" 
    [ngModel]="promoCode" 
    (ngModelChange)="onPromoCodeChange($event)" 
    [ngModelOptions]="{ standalone: true }"
    placeholder="輸入任何英文字母"
  >

\[ngModel] 在這裡單獨出現意味著繫結,或者我個人理解為訂閲。

(ngModelChange) 當繫結的物件出現變動時,觸發這個回調,其 $event 會傳回變動後的值,而其型別和繫結時給入的型別一致。

\[ngModelOptions]="{ standalone: true }" 這裡是模板語法和響應式能夠混用還有效的關鍵。正常來説,任何響應式表單的子節點都必須指定自己的formControlName,如果沒有就會直接報錯。當前的模板寫法之下不可能掛上合法的響應式控件,自然需要額外宣告,因此這個也是必要的。