Angular 2: Swapping between different components without destroying them

16
votes

I'm trying to build a window manager with Angular 2. Basically, I want to be able to swap between windows (that are components injected in a router outlet) without losing their states. For instance, I'm editing a product information form when I change to a customers' list, then I come back to the product form and I find it in the same state... Is it possible?

2
angular
In other words, is there a way of preventing the components from being destroyed when we navigate to another component? - cangosta

2 Answers

5
votes

Checkout canReuse on the router: canReuse in angular2 api docs

If you specify it the router wont destroy your component when switching away from it.

5
votes

Here's how I surpassed this requirement.

Once the route changes, the windows components are destroyed. So, to save state in between those windows instances, I had to manually store it into an injected service.

To store and load the state for each window component, I used the life-cycle hooks that are provided by the router: onActivate(next, prev) and onDeactivate(next, prev).

EDIT

Meanwhile, I've opened an issue on Angular 2 github repo requesting this feature.