Comment implémenter la détection des changements à l'aide d'Angular-js tutoriel-php.cn

Comment implémenter la détection des changements à l'aide d'Angular

亚连

Libérer： 2018-06-02 14:50:32

original

1636 Les gens l'ont consulté

Cet article présente principalement la méthode de détection de changement d'Angular. Je vais maintenant le partager avec vous et vous donner une référence.

La détection des changements est la fonctionnalité la plus importante d'Angular 2. Lorsque les données du composant changent, Angular 2 peut détecter le changement de données et actualiser automatiquement la vue pour refléter les changements correspondants.

Avant d'introduire la détection des changements, nous devons d'abord introduire le concept de rendu dans le navigateur. Le rendu est le processus de mappage du modèle à la vue. Les valeurs d'un modèle peuvent être des types de données primitifs, des objets, des tableaux ou d'autres objets de données en JavaScript. Cependant, les vues peuvent être d'autres éléments tels que des paragraphes, des formulaires, des boutons, etc. sur la page. Ces éléments de page sont représentés en interne par DOM (Document Object Model). Afin de mieux comprendre, jetons un œil à un exemple spécifique :

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

Copier après la connexion

Cet exemple est très simple, car le modèle ne changera pas, donc la page ne sera rendue qu'une seule fois. Si le modèle de données continue de changer au moment de l'exécution, l'ensemble du processus devient compliqué. Par conséquent, afin d'assurer la synchronisation des données et de la vue, la page sera rendue plusieurs fois. Examinons ensuite les questions suivantes :

1. Quand le modèle changera-t-il ?

2. Quels changements se produiront dans le modèle ?

3. mis à jour après le changement ? Où se trouve la zone de vue

4. Comment mettre à jour la zone de vue correspondante

L'objectif fondamental de la détection de changement est de résoudre les problèmes ci-dessus. Dans Angular 2, lorsque le modèle du composant change, le détecteur de changement dans le composant détectera la mise à jour, puis notifiera à la vue de l'actualiser. Par conséquent, le détecteur de changement a deux tâches principales :

1. Détecter les modifications du modèle

2. Notifier l'actualisation de la vue

Ensuite, analysons ce qu'est un changement. .

Changements et événements

Le changement est la différence entre l'ancien modèle et le nouveau modèle, en d'autres termes le changement crée un nouveau modèle. Jetons un coup d'œil au code suivant :

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

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

Copier après la connexion

Après le premier rendu de la page, la valeur actuelle du compteur est 0. Lorsque nous cliquons sur le bouton +, la valeur du compteur augmentera automatiquement de 1, puis la valeur actuelle dans la page sera également mise à jour. Dans cet exemple, l'événement click entraîne la modification de la valeur de la propriété counter.

Continuons à regarder l'exemple suivant :

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

Copier après la connexion

Ce composant utilise le minuteur setInterval pour augmenter automatiquement la valeur du compteur de 1 chaque seconde. Dans ce cas, c'est l'événement timer qui a provoqué la modification de la valeur de la propriété. Enfin, regardons un exemple :

import { Component, OnInit } from &#39;@angular/core&#39;; import { Http } from &#39;@angular/http&#39;; @Component({
 selector: &#39;exe-counter&#39;,
 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;
    });
 }
}

Copier après la connexion

Lorsque ce composant sera initialisé, il enverra une requête HTTP pour obtenir la valeur initiale. Lorsque la requête est renvoyée avec succès, la valeur de l'attribut counter du composant sera mise à jour. Dans ce cas, c'est le rappel XHR qui provoque la modification de la valeur de la propriété.

Résumons maintenant les trois types de sources d'événements qui provoquent des changements de modèle :

1. Événements : clic, survol de la souris, frappe...

Minuteurs : setInterval , setTimeout

3. XHR : Ajax (GET, POST...)

Ces sources d'événements ont une caractéristique commune, c'est-à-dire qu'elles sont toutes des opérations asynchrones. On peut alors penser que toutes les opérations asynchrones peuvent provoquer des changements dans le modèle.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.