Angular SPA中的更改检测

Question

Consider the following very simplistic Angular SPA with the following components' tree structure:

        A
       / \
      B   C

B, C are the two pages of our SPA. Since B and C (their templates) can never be shown at the same time, my understanding is there is no reason to trigger change detection in C when there is model changing in B and vice versa. As to be more clear, eg even if the changes in B affect C , there won't be any problem since when C will be shown, a brand new DOM will be built which will be aware of the prior changes and reflect them.

I'd appreciate your thoughts on the above . Moreover, which is the best way to preclude eg C from change detection when changes apply to B ?

Answer 1

If you are using routing to display B or C, and only one or the other is activated at any point, then the other does not exist in the DOM and therefore won't get any changes.

You can try this out by adding console.log() statements in your ngOnInit and ngOnDestroy methods. When you navigate to B, you'll get the ngOnInit. When you navigate to C, you'll get the ngOnDestroy for B and then ngOnInit for C.

So the answer to your question is that you don't have to do anything to preclude C from change detection when B is loaded.

Unless, of course, your layout is different than I assumed based on your question.

Here is a picture of one of my sample apps with Augury showing the component tree. Notice that the MovieEditComponent is not listed.

And here is another screen shot after I picked the Edit option. Now the MovieEditComponent is listed instead of the MovieDetailComponent.