---
title: "双向绑定回归单向"
date: "2026-04"
category: "Angular"
tags: ["Angular"]
description: "双向绑定的模板写法，在Angular里其实算是个一次性的语法糖，本质上就是一次性绑定数据，数据变动触发事件回调并更新的操作，给全部封装在了一起，那就是默认的香蕉盒子写法。 而这个当然是可以自主控制的..."
source: "https://enriquemark.com/zh-hans/posts/%E9%9B%99%E5%90%91%E7%B6%81%E5%AE%9A%E5%9B%9E%E6%AD%B8%E5%96%AE%E5%90%91"
---

双向绑定的模板写法，在Angular里其实算是个一次性的语法糖，本质上就是一次性绑定数据，数据变动触发事件回调并更新的操作，给全部封装在了一起，那就是默认的香蕉盒子写法。

而这个当然是可以自主控制的。也就是说，我可以在需要的时候，手动回归这种「繁琐」的单向数据流机制，主动让事件回调指向我自己的方法，以让整个过程可以由我进行更高颗粒度的控制。

默认写法有很明确的适用前提，即两边都是可以直接修改的对象，否则直接反向回去更新就会直接出错。或者说我就是希望对回传的数据进行一些自定义的预处理，那这种情况下就要主动控制了。

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

`\[ngModel]` 在这里单独出现意味著绑定，或者我个人理解为订阅。

`(ngModelChange)` 当绑定的对象出现变动时，触发这个回调，其 $event 会传回变动后的值，而其类型和绑定时给入的类型一致。

`\[ngModelOptions]="{ standalone: true }"` 这里是模板语法和响应式能够混用还有效的关键。正常来说，任何响应式表单的子节点都必须指定自己的formControlName，如果没有就会直接报错。当前的模板写法之下不可能挂上合法的响应式控件，自然需要额外声明，因此这个也是必要的。