Understand the change detection (Change Detection) mechanism in Angular

Related tutorial recommendations: "angular tutorial"

Problem phenomenon

During the development process , encountering the problem that the data on the front page is not updated. The front-end page uses interpolation expressions to bind the background data fields. After the background interface is successfully called, the data fields will be modified, but the front-end page is not automatically updated at this time. As shown in the following code, it is a very basic use of interpolation expressions, and there is nothing special about it.

<span class="info-box-number text-success">{{sumDataDto.thirdAll}}</span>

this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
        }
      });

---

Cause of the problem

This problem involves a feature of Angular - Change Detection. The framework used is the ABP framework, and the attribute changeDetection is added to the page automatically generated by the framework. This attribute indicates that the change detection strategy of the current component is OnPush.

@Component({
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [appModuleAnimation()],
  changeDetection:ChangeDetectionStrategy.OnPush
})

Regarding change detection strategies, there are two types:

• Default: Default strategy is the default strategy. As long as the value changes, it will Component and its descendant components are checked.

• OnPush: OnPushThe strategy is that the component will only proceed when the reference of the input data (@Input) changes or an event is triggered. Change detection. This strategy is not thorough but highly efficient.

---

Liberation plan

• Option one, directly delete this attribute assignment
• Option two, manually perform change detection

Option one is very simple, which is to directly delete the assignment statement of this change detection strategy in the component. In this way, the component will adopt the default strategy, but the disadvantage is that the efficiency becomes lower.

The second option is to manually call the trigger function of the change detection mechanism after successfully calling the interface. Change detection objects are used here.
First introduce the change detection module

import { ChangeDetectorRef } from “angular”;

Then declare the change detection object

constructor(private changeDetection:ChangeDetectorRef) {}

Call the change detection method after the interface call is successful

this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
          this.changeDetection.detectChanges();
        }
      });

It’s a bit garbage to manually call C# The smell of recycling mechanism.

Reference materials:

• https://links.jianshu.com/go?to=https://segmentfault.com/a/1190000010928087

• https://links.jianshu.com/go?to=https://www.cnblogs.com/lskzj/p/11143233.html

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of Understand the change detection (Change Detection) mechanism in Angular. For more information, please follow other related articles on the PHP Chinese website!