隔离期间的爱情-angular下自定义组件适用form的方法

实现细节https://segmentfault.com/a/11... 写的很清楚了，非常详细但是我不太能看得懂，随便写写，说不定写着写着就懂了
基本的原理就是

1. 实现一个组件，这个组件接受angular的 ngmodel 的模版驱动表单语法或者reactive form 响应式表单的语法。
2. 接受angular form的语法的原理就是自定义的组件要实现 AbstractControl 接口。
3. 首先明白 ngmodel 到底是做了什么事，太详细的我讲不出来事太多了，我理解就是两个，ngmodel 是一个语法糖。 [(ngModel)]="value"的意思等于

<component-name [value]="value" (ngModelChange)="value = $event"></component-name>

1. 然后在你的component 中监听 value ，和你改变了数据 value 之后触发 ngModelChange.emit(this.value) 事件通知给父组件之类的。但是他这里提供的 api 其实是 writeValue(value){}函数，接受的参数是外面传入的value，每次value修改时会触发writeValue函数。 然后`
   registerOnChange(fn: any) {
   this.propagateChange = fn;
   }

中的 fn 参数其实就是 ngModelChange.emit(this.value)。

写到这里我就更疑惑了，那为什么angular要设计这么复杂的API呢，是为了解决什么场景吗？无法理解呀，好难哦，又是一篇中文垃圾

---

重新写。

• ngmodel 自己有一个 control: FormControl 。 这个 control 是真正的数据存储的地方。 然后 ngmodel 会有一个自身或者是自组件等一切声明为 ControlValueAccessor 的类。这个类是接受交互与展示数据的组件，ngmodel 是对这个组件的 container。

1. ControlValueAccessor 可以是自己声明的组件只要实现了 ControlValueAccessor 类就可以了。实现过程中最重要的两个函数分别为 writeValue 与 registerOnChange。这两个函数的调用时机分别为：

   1. writeValue 是在 setUpModelChangePipeline 中。意思是，ngmodel 中的 control 中的 value 改变了，这时候我会怎么通知 UI 改更新了呢？angular实现是，control 内部的值改变之后，会调用ngmodel.ControlValueAccessor.writeValue(newValue)。所以你的自定义的组件会怎样使用这个值来更新你的 UI 呢。
   2. registerOnChange 是在 setUpViewChangePipeline 中。意思是，通过我给你一个机会，ControlValueAccessor 实现registerOnChange 函数，然后我会在 ngmodel 中调用这个函数，我 ngmodel 会给这个函数一个参数，参数也是一个函数（接受一个值），然后我自己会把接受到的值用来更新我的 control 的数据。

于是呢，我们就可以看到这样的一上一下的两条线，将view =》 model， model =》 view 两件事完成。
写到这里发现和上面了理解的没什么区别呀，我在瞎折腾些什么？？？