问题

I was going through this article and was confused about how the change detection action works. https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c

The concept:

Angular says it does not do dirty checking and there is no two binding as well as watching like in AngularJS 1.X. However, what I understand from Docs and few blogs + stacks is that there is a change detector attached to every component.

However, from this stack overflow with @Gunter's response here: Understanding change detection in angular 2

With ChangeDetectionStrategy.OnPush Angular runs change detection, when in @Input() was updated, a DOM event Angular listens to was received, or the async pipe (| async) received a new value.

I understand that it has an listener which listens for every change from angular. Second if I use runOutsideAngular does it not create change detector object on that component or action?

Other cases are if you explicitly (this.zone.runOutsideAngular()) or for some other reasons code runs outside Angulars zone modifies the status of the component, this also won't be covered (even when the code is an event handler).

Small sub-questions of the change detector lifecycle:

Question 1: Is it that there is an observer or is it an event listener?

Question 2: Does it mean that there is an active change detector object for every component whether we use changeDetectorStartegy.onPush or .Default?

Question 3: What is the impact of these change detector objects in each component implementation if I have 1000 component objects within Angular application? Especially for the memory profile of the application

Question 4: How do I manage it so that it does not impact the memory profile of the application in the browser

Question 5: Is there a place/resource where I can get the lifecycle of the change detector and ngZone associated?

Update: Request someone that rather than marking this question for close I would recommend answering a serious question. I appreciate your help understanding underlying working concepts.

回答1:

It's a quite broad question - these two articles should give you a good understanding:

Angular’s $digest is reborn in the newer version of Angular
Everything you need to know about change detection in Angular

Question 1: Is it that there is an observer or is it an event listener?

Question 2: Does it mean that there is an active change detector object for every component whether we use changeDetectorStartegy.onPush or .Defau

No, change detector is not a listener. Each component in Angular is represented as a view. Hence the application is a tree of views. When you inject ChangeDetectorRef in your component you're essentially injecting a wrapper around this view. Each view has a state which tells whether bindings on this view should be checked. OnPush simply sets this state to disabled so no checks are performed for the view/component. If the bindings change, then Angular sets the state to CheckOnce so that a view is checked only once until the next time the bindings change.

Question 3: What is the impact of these change detector objects in each component implementation if I have 1000 component objects within Angular application? Especially for the memory profile of the application

Question 4: How do I manage it so that it does not impact the memory profile of the application in the browser

As I explained above, there is no such thing as a separate change detector. It's a wrapper around a view. Views exist anyways since it is how Angular represents components tree under the hood.