So implementieren Sie die Änderungserkennung mit Angular

In diesem Artikel wird hauptsächlich die Änderungserkennungsmethode von Angular vorgestellt. Jetzt werde ich sie mit Ihnen teilen und Ihnen eine Referenz geben.

Änderungserkennung ist die wichtigste Funktion in Angular 2. Wenn sich die Daten in der Komponente ändern, kann Angular 2 die Datenänderung erkennen und die Ansicht automatisch aktualisieren, um die entsprechenden Änderungen widerzuspiegeln.

Bevor wir die Änderungserkennung einführen, müssen wir zunächst das Konzept des Renderns im Browser vorstellen. Beim Rendern wird das Modell der Ansicht zugeordnet. Die Werte eines Modells können primitive Datentypen, Objekte, Arrays oder andere Datenobjekte in JavaScript sein. Ansichten können jedoch auch andere Elemente wie Absätze, Formulare, Schaltflächen usw. auf der Seite sein. Diese Seitenelemente werden intern durch DOM (Document Object Model) dargestellt. Schauen wir uns zum besseren Verständnis ein konkretes Beispiel an:

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

Dieses Beispiel ist sehr einfach, da sich das Modell nicht ändert und die Seite daher nur einmal gerendert wird. Wenn sich das Datenmodell zur Laufzeit ständig ändert, wird der gesamte Prozess kompliziert. Um die Synchronisierung von Daten und Ansicht sicherzustellen, wird die Seite daher mehrmals gerendert. Betrachten wir als Nächstes die folgenden Fragen:

Wann wird sich das Modell ändern?

3 nach der Änderung aktualisiert? Wo ist der Ansichtsbereich

4. So aktualisieren Sie den entsprechenden Ansichtsbereich

Der Hauptzweck der Änderungserkennung besteht darin, die oben genannten Probleme zu lösen. Wenn sich in Angular 2 das Modell in der Komponente ändert, erkennt der Änderungsdetektor in der Komponente die Aktualisierung und benachrichtigt dann die Ansicht zur Aktualisierung. Daher hat der Änderungsdetektor zwei Hauptaufgaben:

1. Modelländerungen erkennen

2. Ansicht aktualisieren

Als nächstes analysieren wir, was eine Änderung ist .

Änderungen und Ereignisse

Veränderung ist der Unterschied zwischen dem alten Modell und dem neuen Modell, mit anderen Worten: Veränderung schafft ein neues Modell. Schauen wir uns den folgenden Code an:

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++;
 }
}

Nachdem die Seite zum ersten Mal gerendert wurde, ist der aktuelle Wert des Zählers 0. Wenn wir auf die Schaltfläche + klicken, erhöht sich der Zählerwert des Zählers automatisch um 1 und dann wird auch der aktuelle Wert auf der Seite aktualisiert. In diesem Beispiel führt das Klickereignis dazu, dass sich der Wert der Zählereigenschaft ändert.

Schauen wir uns weiter das nächste Beispiel an:

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);
 }
}

Diese Komponente verwendet den setInterval-Timer, um den Zählerwert jede Sekunde automatisch um 1 zu erhöhen. In diesem Fall ist es das Timer-Ereignis, das die Änderung des Eigenschaftswerts verursacht hat. Schauen wir uns abschließend ein Beispiel an:

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;
    });
 }
}

Wenn diese Komponente initialisiert wird, sendet sie eine HTTP-Anfrage, um den Anfangswert zu erhalten. Wenn die Anfrage erfolgreich zurückgegeben wird, wird der Wert des Zählerattributs der Komponente aktualisiert. In diesem Fall ist es der XHR-Rückruf, der dazu führt, dass sich der Eigenschaftswert ändert.

Lassen Sie uns nun die drei Arten von Ereignisquellen zusammenfassen, die Modelländerungen verursachen:

1. Ereignisse: Klicken, Mouseover, Tastendruck...

2. Timer: setInterval , setTimeout

3. Dann können wir davon ausgehen, dass alle asynchronen Vorgänge zu Änderungen im Modell führen können.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Lösen Sie das Fehlerproblem beim Initialisieren des src-Attributwerts des dynamisch gebundenen vue2.0-Bildes

erstellen- reagieren – Lösung für langsames App-Erstellungsprojekt

Lösen Sie das Problem des Vue-Projektfehlers webpackJsonp ist nicht definiert

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Änderungserkennung mit Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!