変化検出とは何ですか? Angularの変更メカニズムについて話しましょう

変化検出とは何ですか?次の記事では、Angular の変更検出メカニズムについて説明し、ステータス変更がどのように変更検出を通知するのか、Angular の変更検出戦略について紹介します。

#1. 変更検出とは

概要: 変更検出メカニズム
• 、使用されます。コンポーネント ツリーを移動し、各コンポーネントの変更を確認し、コンポーネントのプロパティが変更されたときに DOM の更新をトリガーします。 [関連チュートリアルの推奨事項: "angular チュートリアル"]変更検出の基本タスク: プログラムの内部
ステータス
• を取得し、それをユーザー インターフェイスに表示します ##。この状態は、任意のオブジェクト、配列、または基本データ型にすることができます。 #2. 変更の原因

#イベント駆動型のソースには、次の 3 つのカテゴリがあります:

イベント : ページのクリック、送信、マウス ダウン...

XHR: バックエンド サーバーからデータを取得

• タイマー: setTimeout()、setInterval()
このいくつかの点には 1 つの共通点があります。それは、それらはすべて非同期であるということです。つまり、すべての
• 非同期操作
は、データ変更を引き起こす可能性のある根本要因であるため、一部の非同期操作が行われるたびに、ステータスが変更される可能性があるため、この時点でビューを更新する必要があります

3. ステータス変更の変更検出を通知する方法

Angular、導入された

NgZone

を受け取ります。これは、すべての Angular の 非同期イベント をリッスンします。Angular は、基盤となるブラウザーの一部を (Zone.js を通じて) 書き換えます。開始時の API (すべての非同期イベントを強力に傍受します)。 変更検出をトリガーするには 2 つの一般的な方法があります。1 つはコンポーネントのライフ サイクル フックに基づく方法です。<pre class="brush:js;toolbar:false;">ngAfterViewChecked() { console.log(&amp;#39;cluster-master.component cd&amp;#39;); }</pre>もう 1 つの方法は、変更検出の開始または終了を手動で制御することです。トリガー

constructor(private cd: ChangeDetectorRef) {
  cd.detach()
  setInterval(() => {
    this.cd.detectChanges()
  }, 5000)
}

3. Angular の変更検出

Angular の核心はコンポーネント化であり、コンポーネントのネストにより最終的に コンポーネント ツリー が形成されます。 Angular の変更検出はコンポーネントに分割できます。各コンポーネントには対応する

ChangeDetector

があります。これらの変更検出器もツリーを形成することが考えられます。 Angular では、各コンポーネントに独自の変更検出器があり、各コンポーネントに対して変更検出をいつどのように実行するかを制御できます。 4. 変更検出戦略

Angular では、開発者が変更検出戦略をカスタマイズする機能も提供します。

デフォルト:

各

変更検出により、

他のコンポーネントのステータス変更
• および このコンポーネントの変更を含むコンポーネント変更検出が行われます。参照変数の内部属性値Onpush: いくつかの条件が満たされない限り、各変更検出はこのコンポーネントの変更チェックをスキップします
4.1 デフォルト

Angular のデフォルトの変更検出メカニズムは ChangeDetectionStrategy.Default です。各非同期イベント コールバックが終了した後、NgZone は

全体をトリガーします。コンポーネント ツリー

トップダウン変更検出を行う4.2

onPush<span style="font-size: 18px;"></span>OnPush 戦略は、コンポーネントの変更検出を スキップし、その下のすべてのサブコンポーネント をスキップするために使用されます。

実際、OnPush# はset ## この戦略の後、変更検出をトリガーする方法はまだたくさんあります; 1) コンポーネントの

@Input

属性の 参照 変化します。

2) コンポーネント内の
• DOM イベント (click、submit、mouse down などのサブコンポーネントの DOM イベントを含む)。
3) コンポーネントの
• Observable はイベントをサブスクライブし、同時に Async パイプを設定します。
4) コンポーネント
• 5 内で ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick()
を手動で使用します。変更検出オブジェクト参照
markForCheck():

サブコンポーネント

に使用され、 このサブコンポーネントとルート コンポーネント の間のパスをマークし、angular に通知します。変更検出戦略が

onPush

• detectChanges(): 手動で開始 このコンポーネントから各サブコンポーネントに検出を変更します detach(): 検出器の数 からコンポーネントの検出器を削除し、再接続しない限り、検出メカニズムによって制御されなくなります reattach(): 切り離されたディテクタ
をディテクタ ツリーに再リンクします。
• プログラミング関連の知識の詳細については、
プログラミング ビデオ
• を参照してください。 ！

以上が変化検出とは何ですか? Angularの変更メカニズムについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。