Angular を使用して変更検出を実装する方法

この記事では主に Angular の変更検出方法を紹介しますので、参考にしてください。

変更検出は、Angular 2 の最も重要な機能です。コンポーネント内のデータが変更されると、Angular 2 はデータの変更を検出し、ビューを自動的に更新して対応する変更を反映します。

変更検出を導入する前に、まずブラウザーでのレンダリングの概念を導入する必要があります。レンダリングとは、モデルをビューにマッピングするプロセスです。モデルの値は、JavaScript のプリミティブ データ型、オブジェクト、配列、またはその他のデータ オブジェクトにすることができます。ただし、ビューは、ページ上の段落、フォーム、ボタンなどの他の要素である場合があります。これらのページ要素は、内部的には DOM (ドキュメント オブジェクト モデル) によって表されます。より深く理解するために、具体的な例を見てみましょう。

<h4 id="greeting"></h4> 
<script> document.getElementById("greeting").innerHTML = "Hello World!"; </script>

この例は非常に単純です。モデルは変更されず、ページは 1 回だけレンダリングされるためです。実行時にデータ モデルが変化し続けると、プロセス全体が複雑になります。したがって、データとビューの同期を確実にするために、ページは複数回レンダリングされます。次に、次の質問について考えてみましょう: 1. モデルはいつ変更されますか? 2. 変更後に更新する必要があるビュー領域はどこですか?対応するビューエリア

変更検出の基本的な目的は、上記の問題を解決することです。 Angular 2 では、コンポーネント内のモデルが変更されると、コンポーネント内の変更検出機能が更新を検出し、ビューを更新するように通知します。したがって、変更検出機能には 2 つの主なタスクがあります:

1. モデルの変更を検出する

2. ビューの更新を通知する

次に、変更とは何か、そしてそれがどのように発生するかを分析しましょう。

変化と出来事

変化とは、古いモデルと新しいモデルの違いであり、言い換えれば、変化は新しいモデルを作成します。次のコードを見てみましょう:

import { Component } from '@angular/core'; @Component({
 selector: 'exe-counter',
 template: `
 <p>当前值：{{ counter }}</p>
 <button (click)="countUp()"> + </button>` }) export class CounterComponent {
 counter = 0;

 countUp() { this.counter++;
 }
}

ページが初めてレンダリングされた後、カウンターの現在の値は 0 です。 + ボタンをクリックすると、カウンターのカウンター値が自動的に 1 増加し、ページ内の現在の値も更新されます。この例では、クリック イベントにより、カウンター プロパティの値が変更されます。

次の例を見てみましょう:

import { Component, OnInit } from '@angular/core'; @Component({
 selector: 'exe-counter',
 template: `
  <p>当前值：{{ counter }}</p>
 ` }) export class CounterComponent implements OnInit {
 counter = 0;
 ngOnInit() {
  setInterval(() => { this.counter++;
  }, 1000);
 }
}

このコンポーネントは、setInterval タイマーを使用して、カウンター値を 1 秒ごとに自動的に 1 ずつ増やします。この場合、プロパティ値の変更を引き起こしたのはタイマー イベントです。最後に、例を見てみましょう:

import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; @Component({
 selector: 'exe-counter',
 template: `
  <p>当前值：{{ counter }}</p>
 ` }) export class CounterComponent implements OnInit {
 counter = 0; constructor(private http: Http) {}
 ngOnInit() { this.http.get(&#39;/counter-data.json&#39;)
    .map(res => res.json())
    .subscribe(data => { this.counter = data.value;
    });
 }
}

このコンポーネントが初期化されると、初期値を取得するために HTTP リクエストが送信されます。リクエストが正常に返されると、コンポーネントのカウンタ属性の値が更新されます。この場合、プロパティ値を変更するのは XHR コールバックです。

次に、モデルの変更を引き起こす 3 種類のイベント ソースをまとめてみましょう:

1. イベント: click、mouseover、keyup...

2. タイマー: setInterval、setTimeout

3. Ajax (GET、POST) ...)

これらのイベント ソースには共通の特徴があります。それは、すべて非同期操作であるということです。その場合、すべての非同期操作がモデルの変更を引き起こす可能性があると考えることができます。

上記は私があなたのためにまとめたものです。

関連記事:

vue2.0のダイナミックバインディング画像src属性値の初期化エラー問題の解決策

create-react-appの構築が遅いプロジェクトの解決策

vueプロジェクトのエラーwebpackJsonpが定義されていない問題の解決策質問

以上がAngular を使用して変更検出を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。