@angular/forms 源码解析之双向绑定

2024年3月29日 242次阅读 来源: lx1036

我们知道，Angular 的 @angular/forms 包提供了 NgModel 指令，来实现双向绑定，即把一个 JS 变量（假设为 name）与一个 DOM 元素（假设为 input 元素）进行绑定，这样 name 的值发生变化，input 元素 的 value 也会自动变化；input 元素的 value 发生变化，name 的值也会自动变化。如下代码，展示一个最简单的双向绑定（也可见 stackblitz demo）：

@Component({
  selector: 'my-app',
  template: `
    <input [ngModel]="name" (ngModelChange)="this.name=$event">
    <button (click)="this.name = this.name + ' , apple';">ChangeName</button>
    <p>{{name}}</p>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'banana';
}

上面代码使用了 NgModel 指令来把变量 name 和 input DOM 元素双向绑定到了一起，这里为了更清晰理解 NgModel 的本质，没有使用 [(ngModel)] 语法糖。实际上，在模板里写 [(xxx)] 这种 ‘BANANA_BOX’ 语法，@angular/compiler 的 Template Parser 会把这种语法拆解为为 [xxx] 和 (xxxChange)，可看 L448-L453 和 L501-L505，所以 [(xxx)] 仅仅是为了省事的简单写法。

查看 stackblitz demo 可以看到，如果修改 input 里的值，name 变量的值也自动发生变化了，这点可从与 name 绑定的 p 标签值自动变化看出；如果点击 button 修改了 name 的值，input 输入框内的 value 值也发生变化了，这点可从 input 框内的值变化可看到。那 NgModel 指令是如何做到双向绑定的呢？

在理解 NgModel 指令双向绑定原理之前，可以先看看双向绑定最简单形式：

<input [value]="country" (input)="country = $event.target.value">
<button (click)="country = country + ' , China';">ChangeCountry</button>
<p>Hello {{country}}!</p>

点击 button 修改 model 时，就会自动修改 input 的 value 值，即自动修改 view，数据流方向就是 model -> view；更新 input 框内值时，就会自动修改 country 这个 model 值，这点可从绑定的 p 标签看到，这时数据流方向就是 view -> model。当然，这是最简单且最不可扩展的一个双向绑定实例，如果去设计一个指令，不仅仅需要考虑 view 的不同类型，而且还需要考虑数据校验问题。尽管如此，这个简单实例与 NgModel 指令本质是类似的。

如果自己设计这样一个双向绑定指令，那它的输入必然是绑定的变量 name，该指令接收 name 后再去更新 input 元素的 value 值（还得支持 textarea，select 等 DOM 元素，甚至组件等自定义 DOM 元素），这样 name 发生变化，input 的 value 也会自动变化，即 model -> view；输出的必然是 input 元素的 value 值，然后赋值给 name，这样 input 元素的值变化，name 值也自动变化，即 view -> model。这里的最难点是该指令得能够写 DOM 元素（不管原生或者自定义 DOM 元素）的值，并且能够监听 DOM 元素的值变化，读取变化的值。 所以，为了支持原生 DOM 元素或自定义 DOM 元素，为了有个好的设计模式，必然会抽象出一个接口，来帮助指令去写入和监听读取 DOM 元素值，有了这个接口，事情就简单很多了。

现在，我们需要搞明白两个问题：name 值发生变化时，input 的 value 如何自动变化；input 的 value 变化，name 值如何自动变化?

绑定到 input 上的 NgModel 指令在实例化时，其 构造函数 会首先查找出 ControlValueAccessor 对象，这个 ControlValueAccessor 就是上文提到的抽象出来的对象，该对象会具体负责更新和监听读取 DOM 元素的值。上文模板中的 input 元素不仅仅绑定了 NgModel 指令，实际上还绑定了 DefaultValueAccessor 指令，这点可以从该指令的选择器知道，如果 input 模板是这么写的：

<input [ngModel]="name" (ngModelChange)="this.name=$event" type="number">

那不仅仅绑定了 DefaultValueAccessor 指令，还绑定了 NumberValueAccessor 指令。

由于 DefaultValueAccessor 的 providers 属性提供了 NG_VALUE_ACCESSOR 令牌，并且该令牌指向的对象就是 DefaultValueAccessor，所以 NgModel 构造函数中注入的 NG_VALUE_ACCESSOR 令牌包含的 ControlValueAccessor 对象数组只有 DefaultValueAccessor 一个。如果是 type=”number” 的 input，则 valueAccessors 包含 NumberValueAccessor 和 DefaultValueAccessor 这两个对象。构造函数中的 selectValueAccessor() 方法会依次遍历 NG_VALUE_ACCESSOR 令牌提供的 ControlValueAccessor 对象数组，如果是自定义的 ControlValueAccessor 优先选择自定义的，如果是 @angular/forms 内置的 ControlValueAccessor 就选择内置的（内置的也就 6 个），否则最后选择默认的 ControlValueAccessor 即 DefaultValueAccessor 对象。对于本文 demo，那就是默认的 DefaultValueAccessor 对象。注意的一点是，注入的 NG_VALUE_ACCESSOR 令牌有装饰器 @Self，所以只能从自身去查找这个依赖，自身的意思是 NgModel 指令自己，和它一起挂载到 input 元素的其他指令。另外，input 上没有绑定任何 validators 指令，所以注入的 NG_VALIDATORS 和 NG_ASYNC_VALIDATORS 令牌解析的值为空，并且 input 单独使用，没有放在 form 元素内，或 FormGroup 绑定的元素内，所以不存在宿主控件容器 ControlContainer，即 parent 也为空。

NgModel 指令在首次实例化时，运行 _setUpControl() 方法，利用 ControlValueAccessor（本 demo 即 DefaultValueAccessor 对象） 把 NgModel 指令内部的 FormControl 对象与 DOM 元素绑定。由于本 demo 中，NgModel 指令绑定的 input 没有父控件容器，所以会调用 _setUpStandalone 方法，核心方法就是 setUpControl()，该方法主要包含两点：第一点，通过调用 setUpViewChangePipeline() 向 DefaultValueAccessor 对象内注册一个回调函数，这样当 input 值发生变化时，就触发 input 事件 时，会执行这个回调函数，而这个回调函数的逻辑 一是更新 FormControl 的 value，二是让 NgModel 指令抛出 ngModelChange 事件，该事件包含的值就是当前 input 变化的新值，所以，setUpViewChangePipeline() 方法的作用就是搭建了 view -> model 的管道，这样 view (这里是 input) 值发生变化时，会同步 FormControl 对象的 value 值，并让 NgModel 指令把这个新值输出出去；第二点，通过调用 setUpModelChangePipeline 方法向 FormControl 对象内注册 一个回调，这个回调逻辑是当 FormControl 的 value 值发生变化时（本 demo 中就是 [ngModel]=”name” 时，name 值发生变化，也就是属性值改变，这样 isPropertyUpdated(changes, this.viewModel) 就为 true，这样就会需要更新 FormControl 的 value 值 FormControl.setValue(value)，从而会 触发 上文说的 FormControl 对象内的回调函数），通过调用 ControlValueAccessor.writeValue() 方法去修改 view (这里是 input) 的 value 值（本 demo 中使用的是 DefaultValueAccessor.writeValue(value)），然后让 NgModel 指令抛出 ngModelChange 事件，该事件包含的值就是当前 FormControl 对象 变化的新值，所以，setUpModelChangePipeline() 方法的作用就是搭建了 model -> view 的管道，这样 FormControl 对象值发生改变时，会同步更新 view 的 value，并让 NgModel 指令把这个新值输出出去。

通过以上的解释，就能理解 name 值发生变化时，input 的 value 是如何自动变化的；input 的 value 发生变化时，name 值是如何自动变化的。（最好能一个个点击链接查看源码，效率更高。） 一句话解释就是：NgModel 指令初始化时先安装了两个回调（一个是 view 变化时更新 FormControl 对象 value 值的回调，另一个是 FormControl 对象 value 值变化时更新 view 值的回调），数据流方向从 view -> model 时，更新 FormControl 对象并抛出携带该值的 ngModelChange 事件，数据流方向从 model -> view 时，利用 ControlValueAccessor 去更新 view 值，同时也抛出携带该值的 ngModelChange 事件。抛出的 ngModelChange 事件包含新值，模板中的 $event 会被 @angular/compiler 特殊处理，为 ngModelChange 事件抛出的值。

当然，本文没有考虑存在 Validators 的情况，如果 input 模板修改为如下代码：

<input [ngModel]="name" (ngModelChange)="this.name=$event" required>

那该模板除了绑定 NgModel 指令外，还绑定了 RequiredValidator 指令，这样不管数据流方向是 view -> model 还是 model -> view，在数据流动之前，还需要运行验证器，验证数据的有效性。这样 NgModel 的构造函数里就会包含 一个 RequiredValidator 对象，然后 把这个 Validator 传给 FormControl 对象，最后注册 validatorChange 回调，这样以后 FormControl 值更新时就会 运行 Validators。

总之，NgModel 指令来管理 model <-> view 的数据流，内部存在一个 FormControl 对象，用来读取存储值和验证有效性，从 FormControl 读取的值会赋值给外界传进来的 model，view 是借助 ControlValueAccessor 来读写值。整个 @angular/forms 包的设计也是按照这种数据流形式，并不复杂。

也可阅读 @angular/forms 相关文章了解如何写一个自定义的 ControlValueAccessor：译 别再对 Angular 表单的 ControlValueAccessor 感到迷惑。

    原文作者：lx1036
    原文地址: https://segmentfault.com/a/1190000015862270
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞