prevent reload component when switching in routes in Angular4

Question

I have a page like:

There are two lables: A and B,when clicking A, the outlet will present component A, and component B is shown when clicking B.

Now the label B is clicked and the component B is presented, then click label A, and then click B, the component will raise a reload by ngOnInit. The question is:

How to prevent component B reloading when switching between A and B, I'd like to Init component B just once.

have you considered using resolvers?

Michael Kang
– Michael Kang

2018-03-14 06:58:20 +00:00
Commented Mar 14, 2018 at 6:58 — Michael Kang
– Michael Kang, Commented Mar 14, 2018 at 6:58

Bahman · Accepted Answer · 2018-03-14 09:11:27Z

1

If you don't want to reload components on changing the route why don't you simply put the components in the page and hide/show them accordingly? Please check this example that I created:

https://stackblitz.com/edit/angular-c2teek

answered Mar 14, 2018 at 9:11

Bahman

1,05413 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sampgun Over a year ago

Bad solution IMHO, drastically affects performances if components include heavy stuff.

Bahman Over a year ago

@Sampgun I am not sure if I call this bad solution for the asked question. But I am happy to upvote your solution if you have better idea.

Sampgun Over a year ago

I don't have time to write an answer, right now, but basically using a Subject (in some factory) to save the last state for both routes would do the job. Also if I'm not mistaken it could possible to customize Angular routesReusingStrategy to achieve the same goal.

Sampgun Over a year ago

Here, something like this itnext.io/… (not tested, but I have to do something similar, so I will be able to update this question. I'll bookmark for the purpose.)

Bahman Over a year ago

Thanks for sharing the link. I agree with you that we can use "RouteReuseStrategy" and it could be a better (fancier) solution. However, I am not clear how does it impact performance? The question is about calling ngOnInit of component B only one time and I am not sure if it makes any difference if we use "RouteReuseStrategy" or not.

|

AmitKhiwal · Accepted Answer · 2018-03-14 07:05:59Z

1

I have used angular service to maintain all the data of components and has called the relevant functions in component's constructor to assign those values to the component's local variables / objects.

So on every switch, the component's constructor will be invoked and it'll fetch the properties from the service.

You can do the same calling in ngOnInit() as well if not constructor.

answered Mar 14, 2018 at 7:05

AmitKhiwal

596 bronze badges

Collectives™ on Stack Overflow

prevent reload component when switching in routes in Angular4

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related