????網(wǎng)絡上對于Angular的源碼解析少之又少，這是近年來國內(nèi)ng使用人群導致的生態(tài)衰落問題，與谷歌的擺爛也有著密切關(guān)系，故在此淺薄敘述下Angular8+版本中雙向綁定的源碼實現(xiàn)思路。

????核心函數(shù)：ngModel

????ngModel的基本原理是會在構(gòu)建時根據(jù)指令所在元素的類型為其添加事件綁定，從而使數(shù)據(jù)雙向綁定生效。

? ? 而ngModel所使用的核心函數(shù)又分為為HostListener、HostBinding和ControlValueAccessor。?

????1、HostListener用于實現(xiàn)從UI元素向模型數(shù)據(jù)的綁定，即當UI元素發(fā)生某些指定事件時，該事件執(zhí)行特定的邏輯，從而更新模型數(shù)據(jù)。?

????2、HostBinding則用于實現(xiàn)從模型數(shù)據(jù)向UI元素的綁定，即將模型數(shù)據(jù)映射到UI元素的特定屬性上，從而實現(xiàn)數(shù)據(jù)與UI的雙向綁定。?

????3、ControlValueAccessor是一個接口，用于定義該指令如何與模型數(shù)據(jù)進行交互，包括寫入數(shù)據(jù)和讀取數(shù)據(jù)。?

????具體流程如下：?

1、當頁面渲染時，Angular會檢查每個指令所在元素的類型，并為其添加特定的事件綁定，從而使數(shù)據(jù)雙向綁定生效。?

2、當用戶在UI元素上進行操作時，事件會觸發(fā)并執(zhí)行特定的邏輯，從而更新模型數(shù)據(jù)。?

3、模型數(shù)據(jù)更新后，Angular會將其映射到UI元素的特定屬性上，從而實現(xiàn)數(shù)據(jù)與UI的雙向綁定。

4、當用戶對UI元素進行操作時，Angular會自動將其值傳遞給ControlValueAccessor接口的實現(xiàn)函數(shù)，從而實現(xiàn)與模型數(shù)據(jù)的交互。

????ControlValueAccessor接口做了什么？

????實現(xiàn)表單控件與表單的雙向綁定。先看看ControlValueAccessor接口里實現(xiàn)哪些方法：

????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 —— 這個函數(shù)會把制定的值寫入自定義表單控件中。

????2. registerOnChange(fn: any): void —— 這個函數(shù)會在自定義表單控件的值發(fā)生變化時，調(diào)用指定的回調(diào)函數(shù)。?

????3. registerOnTouched(fn: any): void —— 這個函數(shù)會在自定義表單控件被觸摸時，調(diào)用指定的回調(diào)函數(shù)。

????4. setDisabledState(isDisabled: boolean): void —— 這個函數(shù)會將自定義表單控件設置為禁用或啟用狀態(tài)。