Introduction to Angular change detection methods and introduction to angular

Introduction to Angular change detection methods and introduction to angular

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

Before introducing the change detection, we should first introduce the rendering concept in the browser. rendering is the process of ing the model to the view. The model value can be the original data type, object, array or other data objects in JavaScript. However, a view can be a section, form, button, and other elements in the page. These page elements are represented by the DOM (Document Object Model). For better understanding, let's look at a specific example:

Copy codeThe Code is as follows:
<H4 id = "greeting">

This example is simple. Because the model does not change, the page is rendered only once. If the data model is constantly changing during running, the entire process will become complicated. Therefore, to ensure data synchronization with views, the page will be rendered multiple times. Next, let's consider the following questions:

1. When will the model change?

2. What changes have taken place in the model?

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

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 detects the update and notifies the view to refresh. Therefore, the change detector has two main tasks:

1. Detect model changes

2. Refresh the Notification View

Next, let's analyze what changes are and how changes are generated.

Changes and events

Changes are the difference between the old model and the new model. In other words, changes generate a new model. Let's take a look at the following code:

Import {Component} from '@ angular/core'; @ Component ({selector: 'exe-counter', template: '<p> current value: {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 counter value is 0. When we click the + button, the counter value of the counter will be automatically added with 1, and the current value on the page will be updated. In this example, the click event changes the counter attribute value.

Let's continue to look at the next example:

Import {Component, OnInit} from '@ angular/core'; @ Component ({selector: 'exe-counter', template: '<p> current value: {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 per second. In this case, the timer event causes a change in the attribute value. Finally, let's look at an example:

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

During initialization, the component sends an HTTP request to obtain the initial value. When a successful request is returned, the counter attribute value of the component is updated. In this case, it is caused by the XHR callback that changes the attribute value.

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

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

2. Timers: setInterval and setTimeout

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

These event sources share a common feature, that is, they are all asynchronous operations. We can think that all asynchronous operations may cause model changes.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.