angularangular2-routingangular4-router

Router named outlets that are activated once


Is it possible to have router named outlets that are activated once and then never destroyed, no matter what route is navigated in primary outlet?

The intention is to have components that persist on page (for instance, sidebar) but get the benefits of routing on their initial load - such as guards (resolvers) and lazy loading.

The requirement is that named outlets shouldn't affect UX in any negative way, for example by introducing garbage suffixes to SPA URL, e.g. (outletName:routeName), they also shouldn't be accidentally deactivated. If there's a way to detach them from router after initial activation, it would be appropriate.

skipLocationChange option cannot be used for this purpose. In this example /login(popup:compose) URL appears when Contact and Login routes are sequentially navigated.


Solution

  • Router needs information about named outlets, so there are good chances that implementing your own UrlSerializer will help.

    Idea is simple, deserialization process should be aware of routes which have static named outlets and produce UrlTree which contains named outlets i.e. for /login url should produce the same UrlTree as default serializer will produce for url /login(popup:compose). During serialization static named outlet parameters should not be included into resulting url.