浅谈Angular8+版本中双向绑定的源码实现思路

    网络上对于Angular的源码解析少之又少，这是近年来国内ng使用人群导致的生态衰落问题，与谷歌的摆烂也有着密切关系，故在此浅薄叙述下Angular8+版本中双向绑定的源码实现思路。

    核心函数：ngModel

    ngModel的基本原理是会在构建时根据指令所在元素的类型为其添加事件绑定，从而使数据双向绑定生效。

    而ngModel所使用的核心函数又分为为HostListener、HostBinding和ControlValueAccessor。 

    1、HostListener用于实现从UI元素向模型数据的绑定，即当UI元素发生某些指定事件时，该事件执行特定的逻辑，从而更新模型数据。 

    2、HostBinding则用于实现从模型数据向UI元素的绑定，即将模型数据映射到UI元素的特定属性上，从而实现数据与UI的双向绑定。 

    3、ControlValueAccessor是一个接口，用于定义该指令如何与模型数据进行交互，包括写入数据和读取数据。 

    具体流程如下： 

1、当页面渲染时，Angular会检查每个指令所在元素的类型，并为其添加特定的事件绑定，从而使数据双向绑定生效。 

2、当用户在UI元素上进行操作时，事件会触发并执行特定的逻辑，从而更新模型数据。 

3、模型数据更新后，Angular会将其映射到UI元素的特定属性上，从而实现数据与UI的双向绑定。

4、当用户对UI元素进行操作时，Angular会自动将其值传递给ControlValueAccessor接口的实现函数，从而实现与模型数据的交互。

    ControlValueAccessor接口做了什么？

    实现表单控件与表单的双向绑定。先看看ControlValueAccessor接口里实现哪些方法：

    export interface ControlValueAccessor {

      writeValue(obj: any): void

      registerOnChange(fn: any): void

      registerOnTouched(fn: any): void

      setDisabledState?(isDisabled: boolean): void

    }

    可以看到ControlValueAccessor接口中有4个方法：   

    1. writeValue(value: any): void —— 这个函数会把制定的值写入自定义表单控件中。

    2. registerOnChange(fn: any): void —— 这个函数会在自定义表单控件的值发生变化时，调用指定的回调函数。 

    3. registerOnTouched(fn: any): void —— 这个函数会在自定义表单控件被触摸时，调用指定的回调函数。

    4. setDisabledState(isDisabled: boolean): void —— 这个函数会将自定义表单控件设置为禁用或启用状态。