22

I have an application, with views behind routes, I need to be able to continue from the point when the route changed, but after going back, the component is in its initial state.

Is there any way how to keep the state of a component?

Dan
  • 5,836
  • 22
  • 86
  • 140
Jarek
  • 7,425
  • 15
  • 62
  • 89
  • As opposed to providers injected into individual components, the key might be to have app-level providers/services, which is explained a bit here: http://stackoverflow.com/a/32807310. As explained in the answer, component-level providers are created every time a route's component is generated. App-level providers (declared inside of `bootstrap`) are created once (see this site for more info: http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2). If you come up with a good solution, please post it here. – Aaron Jessen Jan 09 '16 at 16:51

2 Answers2

19

update 2

That's now fixed (Angular 2.3) for the new router by https://github.com/angular/angular/pull/13124 which allows to provide a custom reuse strategy.

For an example see also https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

Angular docs https://angular.io/api/router/RouteReuseStrategy

update 2 This answer is only for a long ago discontinued router version.

See https://angular.io/docs/ts/latest/guide/router.html#!#guards for how to do it in the current router.

original

If your components implements CanReuse and returns true from 

routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
  return true;
}

then the component is kept and reused instead of destroyed and recreated.

Another way is to keep the data in a shared service and fetch them from there when the component is recreated.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
3

There is an open issue on this exact scenario in https://github.com/angular/angular/issues/5275

You can use routerCanReuse only if the new component and the old component(when you hit the 'back' button) are of the same Component type.

As Günter suggested your only option right now if the Components are of different type is to keep state in a shared service.

kernix
  • 7,970
  • 3
  • 28
  • 44
  • 1
    After searching a lot, this worked for me perfecly: https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx – Philip Enc Dec 08 '17 at 09:52
  • @PhilipEnc How did you make that work? None of my routes work if I navigate when using that. I'm using lazy loading. – Chrillewoodz Feb 09 '18 at 09:19
  • My app is not lazy loading. May be thats the difference. – Philip Enc Feb 09 '18 at 16:18
  • @PhilipEnc Though maybe too late, this was exactly what I was looking for! I had a component that needed some plain js codes to run and when the component was destroyed and created again, those js codes would break. By keeping the states as this link implements, now everything's perfect :) – imans77 Feb 07 '19 at 23:30