Angular2 Routing – keeping state of component when route changes [duplicate]

by

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.

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. How to detect a route change in Angular?
  3. How to determine previous page URL in Angular?
  4. How do I create a singleton service in Angular 2?
  5. How to go back last page
  6. Angular: Cannot find a differ supporting object ‘[object Object]’
  7. Angular2 multiple router-outlet in the same template
  8. How to get current route
  9. ‘router-outlet’ is not a known element
  10. Angular2: Make route paths case insensitive
  11. Angular 2 Scroll to top on Route Change
  12. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  13. Angular2 – Redirect to calling url after successful login
  14. How can I conditionally disable the routerLink attribute?
  15. Angular 2: getting RouteParams from parent component
  16. Angular2 – Interaction between components using a service
  17. Angular2 router keep query string
  18. Angular 2 passing object via route params possible?
  19. Multiple canActivate guards all run when first fails
  20. Angular 2 router resolve with Observable
  21. Can’t reload/refresh active route
  22. How do I navigate to a sibling route?
  23. Angular2 routing / deep linking not working with Apache 404
  24. Pass parameter into route guard
  25. Angular routerLink does not navigate to the corresponding component
  26. How to get parameter on Angular2 route in Angular way?
  27. angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
  28. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)
  29. Angular2 router, get route data from url, to display breadcrumbs
  30. Share data between components using a service in Angular2

Leave a Comment