ngModelソースの浅い解

前言

以前にvueの双方向バインド原理を見たことがあり、簡単なdemoを実現したことがあるが、angularの下で、双方向バインドがどのように実現されているかを説明するのはめったに見られないので、NgModelのソースコードを見て、大同小異を発見し、特に

現在ではngModelがどのように実現されているかについてのみ述べるが、属性バインドや命令に関する知識

には関与しない.

この記事では、

を読むには、次の知識が必要です.
カスタムフォームコントロール
応答フォームのFormControl
ngModelは、いくつかの命令を使用していますか?

一般的にそう言うと、確かに1つの命令だけを使用していることを意味します.そうしないと、確定した事実を話すのに時間を無駄にしません.
コンポーネントも命令に受け継がれているので、そう言っても間違いないはずです.

NgModelとControlValueAccessor 、NgModelを使用する場合は、実際には2つの命令

が使用されます.

NgModelは、いくつかの関数の登録を担当し、すべてのControlValueAccessor が実装する4つの方法(オプションの無効化方法)は、最終的にはNgModelによって使用される

である.

ControlValueAccessor は、送信値がいつ変更するか、値書き込みが発生したときに

をどのように処理するかなど、バインドを規定する内部論理である.
フローチャート
登録

登録とは、その値が変更するときである.実装クラスはどのような方法で変更

を通知すべきか.

実装クラスのregisterOnChange(fn),fnは登録フェーズで入力され、このフェーズで .registerOnChange(fn)が呼び出されると、関数は実装クラスに付与され、値が変更されると実装クラスが呼び出され、この関数通知値は

に変更する.

この段階では、合計6つのメソッドが登録されている(ベリファイアは同期、非同期に分けられる)

はクラスのregisterOnChangeを実現し、ビューの値が変更すると呼び出し伝達関数

を呼び出す.

インプリメンテーションクラスのregisterOnTouched、デフォルトのインプリメンテーションクラスは、フォーカスを失ったときに受信関数

を呼び出す.

NgModelのFormControlインスタンスのregisterOnChangeは、値が変化すると、入力関数

を呼び出す.

NgModelにおけるFormControlインスタンスにおけるregisterOnDisabledChangeは、状態変化を無効にする場合、実装クラスにおけるsetDisabledStateメソッド

を呼び出す.

ベリファイアのregisterOnValidatorChangeベリファイアの入力属性が変化すると、入力関数

が呼び出される.

入力関数は、shared.tsファイルに書かれている

入力

[ngModel]が入力値が変更されるとNgModelのngOnchangesフックにより

にキャプチャされる.

値が初期値に変更または変更すると、フックのthis._updateValue(this.model)

が呼び出される.

このメソッドはクラスのFormControl の値変更

をトリガーする.

値が変更すると、上記登録方法のうちの3は を実行し、関数では実装クラスのwriteValueメソッドがトリガーされ、このとき実装クラスは変更値

を受け取る.

デフォルトのメソッドでは、変更値を受け取るとangularのレンダラーを利用してinput要素のvalueに

が書き込まれる.

入力フロー終了

しゅつりょく

inputまたはcompositionendのイベントのときに、着信関数onChangeが呼び出される.blurイベントの場合、入力関数onTouched

が呼び出される.

関数は、値を受け取ると更新タイミングにあるか否かを判断し、そうであれば更新呼び出しNgModelのviewToModelUpdate

を更新する.

この方法は値を更新し、ngModelChangeの通知値が

に変更されたことを送信する.
難点

カスタムフォームコントロールの書き方はみんな知っているはずです.ngModel inputプロパティとngModelChange outputイベントは書いたことがありませんが、ControlValueAccessor類を実現した後、不思議に実現しました.

ここでは、NgModel命令のセレクタが[ngModel]:not([formControlName]):not([formControl])であるため、すなわち、応答式フォームでない限り、ngModel付きのすべての命令は自動的にこの命令

を使用する.

であり、この命令は構築時に彼のControlValueAccessor を探し、発見後、いくつかの変更が必要な関数を に通知することによって関連

が確立する.
ソースコメント

ソースコードを见る时も立面の関数に対して、方法はすでに関连する文に注釈をして、もしみんなが上のがまだはっきりしないことを见るならば、注釈のソースコードを参照することができて、あなた达に

を助けることができることを望みます

ng_model.ts

shared.ts

default_value_accessor.ts

疑問

どこかに記載されている問題や間違っているものがあれば、貴重な意見をたくさん提出してください.