In Javascript code, it is executed in a certain order. When it is the turn of a code fragment to execute, the browser will only execute the current fragment and will not do anything else. So sometimes some poorly done web pages get stuck after clicking on something, and the way Javascript works is one of the reasons for this!

Let's first recall the old AngularJS

When to use $apply()?

Still the question, when do we need to call the apply() method? The situation is very rare, in fact almost all our code is wrapped in the apply() method? There are very few cases. In fact, almost all our code is wrapped in scope.apply(), like ng-click, controller initialization, apply(), like ng-click, controller initialization, http callback function, etc. In these cases, we don't need to call it ourselves, and in fact we can't call it ourselves, otherwise calling the apply() method in the apply() method and then calling the apply() method in the apply() method will throw an error. We only really need it if we need to run the code in a new execution sequence, and if and only if this new execution sequence was not created by a method of the angular JS library, then we need to use the scope. scope.apply() wrapped. Here's an example to explain:

functionCtrl($scope) {
  $scope.message ="Waiting 2000ms for update";    
  setTimeout(function () {
  　　$scope.message ="Timeout called!";
     // AngularJS unaware of update to $scope
  }, 2000); }

After the above code is executed, the page will display: Waiting 2000ms for update. Apparently the data update is not noticed by angular JS.
Next, we slightly modify the Javascript code and wrap it with scope.scope.apply().

functionCtrl($scope) {
  $scope.message ="Waiting 2000ms for update"; 
  setTimeout(function () {
  　　$scope.$apply(function () {
     　　$scope.message ="Timeout called!";
      });
  }, 2000); }

The difference this time is that the page will first display: Waiting 2000ms for update, and after waiting for 2 seconds, the content will be changed to: Timeout called! . Apparently the data update is detected by angular JS. Instead of doing this, we should use the timeout method provided by angular JS, so that it will be automatically wrapped with the timeout method, so that it will be automatically wrapped with the apply method.

Going back to the latest Angular10+, we have removed the built-in method $apply() and replaced it with ChangeDetectorRef

The base class for Angular's various views, providing change detection capabilities. The change detection tree collects all the views to be checked. Use these methods to add or remove views from the tree, initiate change detection, and explicitly mark those views as dirty , meaning they have changed and need to be re-rendered.

abstract class ChangeDetectorRef {
  abstract markForCheck(): void
  abstract detach(): void
  abstract detectChanges(): void
  abstract checkNoChanges(): void
  abstract reattach(): void
}

Here we only need to use detectChanges to achieve the same refresh data function as $apply(). The code is as follows

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss']
})
export class FirstComponent implements OnInit {

  constructor(public changeDetectorRef: ChangeDetectorRef) { }

  ngOnInit() {
    this.changeDetectorRef.detectChanges();//强制刷新数据渲染
  }
}

Mainly these

For more ChangeDetectorRef built-in methods, please click↓

https://angular.cn/api/core/ChangeDetectorRef#detectchangeshttps://angular.cn/api/core/ChangeDetectorRef#detectchanges

Angular's ChangeDetectorRef.detectChanges() implements angularJS's $apply() method to force refresh data rendering

When to use $apply()?

Guess you like