Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 zone.run() vs ChangeDetectorRef.detectChanges()

Say I have a function noificationHandler() in my service.ts that is outside of angular's context. noificationHandler() is invoked by a third party and noificationHandler() basically consumes an array and emits the array to components which have subscribed to his service.

service.ts

    public mySubject: Subject<any> = new Subject();     public myObservable = this.mySubject.asObservable();      constructor() {        this.registry.subscribe("notification.msg",this.noificationHandler.bind(this));     }      noificationHandler(data) {        this.publishUpdate(data)     }      publishUpdate(data) {        this.mySubject.next(data);     } 

component.ts

constructor(private service: myService) {     this.service.myObservable.subscribe(list => {         this.list = list;     }); } 

^^^ at this point the template is not updated with the new data

Since the "notification.msg" is outside of angular's zone, angular s change detection is not run when this event("notification.msg") is invoked.

Now there are 2 ways to invoke change detection.

1) By wrapping the noificationHandler() inside of angular's zone.run()

 this.registry.subscribe("a2mevent.notification.msg", this.ngZone.run(() => this.noificationHandler.bind(this))); 

2) By individually asking the component to detect changes

constructor(private service: myService, private ref: ChangeDetectorRef) {     this.service.myObservable.subscribe(list => {         this.list = list;         this.ref.detectChanges(); // <==== manually invoking change detection     }); } 

Both the options work! And my component structure is as follows

A --> root component B C D // my component is here (4 levels of nesting) 

Questions -

1) Will detectChanges() detect changes only for its own components or will it also run change detection on child components?

2) will zone.run() trigger the change detection of all the components from the root till the leaf?

Among the zone.run() and detectChanges() I am curious as to which is better in performance?

like image 995
Ajey Avatar asked Mar 23 '17 09:03

Ajey


People also ask

What does ChangeDetectorRef detectChanges () do?

detectChanges()linkChecks this view and its children. Use in combination with detach to implement local change detection checks.

What is NgZone run?

In those cases, the NgZone service provides a run() method that allows you to execute a function inside the Angular zone. This function, and all asynchronous operations in that function, trigger change detection automatically at the correct time.

What is ChangeDetectorRef Angular?

ChangeDetectorRef allows you to manipulate this tree, angular runs the change detection every time there is a change. For example, when you have a large amount of data and there is a change in that data, angular will render the view again, if the data changes every second, your application will become slower.


1 Answers

ApplicationRef.tick (same as setTimeout()), and zone.run() cause change detection on the whole application. Also event listeners added within Angular or by Angular (using view bindings or @HostBinding() cause change detection for the whole application.

ChangeDetectorRef.detectChanges runs change detection for a specific component (and its descendants if applicable, for example because of input bindings)

If some code running outside Angular's zone calls into Angular's code and changes the state, then change detection needs to be invoked explicitly because Angular has no way of knowing that the state changed.

If the change to the state is local to a component (for example a components field), ChangeDetectorRef.detectChanges or ChangeDetectorRef.markforCheck are more efficient.

If the call from outside for example navigates to a different route, this can have consequences to a number of components, and it's also not clear when the whole route change is completed because it might cause async calls (and callbacks being called). In this case zone.run() is the better option, because the code directly and indirectly invoked (like callbacks of observables and promises) invoked will run inside Angular's zone and Angular will recognize them and invoke change detection automatically.

like image 58
Günter Zöchbauer Avatar answered Sep 28 '22 03:09

Günter Zöchbauer