Angular 2: Components in history getting created newly every time while going back

[TheMohanraj]

In Angular 2 Tour of Heroes example,

1. I'm moving from Top heroes to heroes detail page.
2. Now from heroes detail page, I'm pressing back and It navigates back to top heroes page.
3. Here I noticed that, top heroes page constructor was getting called again.

It seems to be very expensive, every time we land the page, It has to make numerous http calls.

[zoechi]

What about creating a plunker as mentioned in the linked issue?

Does the component implement CanReuse

[TheMohanraj]

Sure. Here is the link http://plnkr.co/edit/P7BsEws3sKGbhhNH0OVA?p=preview
Launch for preview, select a top hero and the go back

[zoechi]

See also

• Programmatically prevent the destruction of components when requested #5275
• Router: Design for routerCanActivate, an injectable alternative to @CanActivate #7784 (lots of discussion about when canReuse works and when it doesn't.

[CaptainCodeman]

CanReuse is not going to help you here IMO. You can't prevent the reloading of the component unless Angular 2 (or another router) introduces some sticky-state / component cache mechanism.

In the meantime, you could use the service to cache data to prevent it being re-requested although then people's expectation that going to the page will show the latest values may be tested - you need some mechanism to push or poll to changes.

[PareshMangukiya]

I am also facing same issue.

[PareshMangukiya]

when this issue has been resolved any ET?

[sintro]

I think, this issue have the same theme as described here #7757
In a nutshell: there is must be the built-in solution of caching and reusing of every previously rendered (in one browser session) component. Ideally, it should be something like russian-doll caching (nested fragment/component caches), with checking for update of every showed component in background and rerendering it if new data was fetched.
This behaviour is called "Reactivity" in Meteor community (if I'm not mistaken), and heavily used in that framework out-of-box: you will see something immediately after any action, and after browser will get confirmation data from server, it will correct the DOM elements with actual data (if needed). Any "suggested" components is drawn from the cache or pre-written code.

[DzmitryShylovich]

#13124 already merged
so this one can be closed @pkozlowski-opensource

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}