Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Have more than one active module in Angular 2

Angular 2 final has been released and I've been playing around with the final router release.

A good example of the router in action can be found here: http://plnkr.co/edit/mXSjnUtN7CM6ZqtOicE2?p=preview

I was wondering if there's any mechanism for keeping the current module rendered in the DOM (but hidden) while loading in a new one on top? The use case here is that perhaps a user may be using an Admin-type module and realise they need to create some asset (perhaps a user) so jump to a Users module to create; before hopping back to where they were in the Admin module.

In this scenario, the user could be at some deep-linked section of the Admin module and it would be very strange behaviour for them to lose what they were doing.

Is this possible? From all I've done so far, I've seen that the modules presented in the <router-outlet> tags get dumped off the DOM completely.

Thanks!

like image 512
aaron-bond Avatar asked Sep 23 '16 11:09

aaron-bond


People also ask

Can there be more than one router-outlet element in Angular application?

You can have multiple router-outlet in same template by configuring your router and providing name to your router-outlet, you can achieve this as follows.

Can we have multiple routes in Angular?

Angular Router supports multiple outlets in the same application. A component has one associated primary route and can have auxiliary routes. Auxiliary routes enable developers to navigate multiple routes at the same time.

Do I need a routing module always in Angular?

No, the Routing Module is a design choice. You can skip routing Module (for example, AppRoutingModule) when the configuration is simple and merge the routing configuration directly into the companion module (for example, AppModule).


1 Answers

Currently components added by the router are discarded when the route is changed. This is planned to be made configurable eventually.

If you keep data (model) in shared services (that are not discarded) instead of the component itself, then the user gets back the original view when navigating back to a previous route.

The services needs to be provided on a component that isn't removed by the router. The root component or providers in an @NgModule() that is not lazy-loaded would work.

like image 54
Günter Zöchbauer Avatar answered Sep 18 '22 00:09

Günter Zöchbauer