How to implement change detection using Angular

This article mainly introduces the change detection method of Angular. Now I will share it with you and give you a reference.

Change Detection (change detection) is the most important feature in Angular 2. When the data in the component changes, Angular 2 can detect the data change and automatically refresh the view to reflect the corresponding changes.

Before introducing change detection, we must first introduce the concept of rendering in the browser. Rendering is the process of mapping the model to the view. A model's values ​​can be primitive data types, objects, arrays, or other data objects in JavaScript. However, views can be other elements such as paragraphs, forms, buttons, etc. in the page. These page elements are represented internally by DOM (Document Object Model). In order to better understand, let's take a look at a specific example:

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

This example is very simple, because the model will not change, so the page will only be rendered once. If the data model keeps changing at runtime, the whole process becomes complicated. Therefore, in order to ensure synchronization of data and view, the page will be rendered multiple times. Next, let’s consider the following questions:

1. When will the model change?

2. What changes will occur in the model?

3. What needs to be updated after the change? Where is the view area

4. How to update the corresponding view area

The basic purpose of change detection is to solve the above problems. In Angular 2, when the model in the component changes, the change detector in the component will detect the update and then notify the view to refresh. Therefore, the change detector has two main tasks:

1. Detect model changes

2. Notify view refresh

Next, let’s analyze what a change is. How change occurs.

Changes and Events

Change is the difference between the old model and the new model. In other words, the change creates a new model. Let's take a look at the following code:

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

After the page is rendered for the first time, the current value of the counter is 0. When we click the button, the counter value of the counter will automatically increase by 1, and then the current value in the page will also be updated. In this example, the click event causes the value of the counter property to change.

Let’s continue to look at the next example:

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

This component uses the setInterval timer to automatically increase the counter value by 1 every second. In this case, it's the timer event that caused the property value to change. Finally, let's look at an example:

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

When this component is initialized, it will send an HTTP request to obtain the initial value. When the request returns successfully, the value of the component's counter attribute will be updated. In this case, it's the XHR callback that causes the property value to change.

Now let’s summarize the three types of event sources that cause model changes:

1. Events: click, mouseover, keyup...

2. Timers: setInterval , setTimeout

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

These event sources have a common characteristic, that is, they are all asynchronous operations. Then we can think that all asynchronous operations may cause changes in the model.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solve the problem of error when initializing vue2.0 dynamic binding image src attribute value

create-react- Solution to the slow app building project

Solution to the problem of vue project error webpackJsonp is not defined

The above is the detailed content of How to implement change detection using Angular. For more information, please follow other related articles on the PHP Chinese website!