Javascript 角度2+；：NgModel/NgControl如何在内部处理从视图到模型的更新？

我正在深入研究双向数据绑定的工作原理。目前，我对视图（例如，

输入

元素）的更新如何在内部传播到

NgControl

感到困惑

在

ControlValueAccessor

的定义中，它提到

registerOnChange

负责查看->模型更新（，和）。通过一个简单的指令，我们可以把它放在与

[（NgModel）]

相同的

输入

元素上，例如

，我试着处理这个问题

constructor(private ngControl: NgControl) { }
ngOnInit(): void {
    // this.ngControl.valueAccessor['onChange'] = () => {}; 
    // uncommenting the above line prevents updates from view to model 
}

取消注释/注释指示行允许我们允许/阻止从输入元素到模型的更新。但我对此感到困惑，因为在的源代码中，这个示例中使用的，

onChange

实际上并没有做任何事情：

（\uu:any）=>{}

因此，我希望在引擎盖下，例如在相关类中，如

NgControl

或

FormControl

，ValueAccessor的

onChange

函数会发生一些事情；设置它或将它包装到另一个函数中，可能是代理，或者其他什么。我什么也没找到。然后我继续寻找一些代码，其中监听器（对于

input

事件，更明确地说）被显式绑定到input元素，但也没有运气

我注意到了，但我不确定在深入到更改检测的内部时是否朝着正确的方向前进，因为我希望在DOM中侦听更改与

ControlValueAccessors

和/或

FormControl/AbstractControl

---

有人想详细说明这是如何工作的吗？：-）

ControlValueAccessor.registerOnChange由NgForm提供

1） NgModel在NgForm中注册（请参阅）

2） NgForm调用共享设置控制功能（请参阅）

3） setUpControl寄存器更改事件处理程序（请参阅）

in NgModel.ngOnChanges: this._setUpControl calls this.formDirective.addControl

import { setUpControl } from './shared';
NgForm.addControl calls setUpControl

setUpControl calls setUpViewChangePipeline

function setUpViewChangePipeline(control: FormControl, dir: NgControl): void {
  dir.valueAccessor !.registerOnChange((newValue: any) => {
    control._pendingValue = newValue;
    control._pendingChange = true;
    control._pendingDirty = true;

    if (control.updateOn === 'change') updateControl(control, dir);
  });
}