Router named outlets that are activated once

Question

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 t

Answer 1

It appears that we cannot use a secondary route that targets a named outlet without having the secondary route appended to the URL. As suggested in your question, one possible solution would be to detach the component from the router outlet once it has been activated. My attempt to implement that solution is shown in this stackblitz:

export class AppComponent {

  @ViewChild("popupRouterOutlet", { read: ViewContainerRef }) private popupRouterOutlet: ViewContainerRef;
  @ViewChild("popupContainer", { read: ViewContainerRef }) private popupContainer: ViewContainerRef;

  constructor(public router: Router) {
  }

  processActivate(e) {
      let viewRef = this.popupRouterOutlet.detach(0);
      this.popupContainer.insert(viewRef);
      this.router.navigate([".", { outlets: { popup: null } }]);
  }
}

In the activate event handler, the component is detached from the router outlet, it is inserted in an ng-container, and the router outlet is cleared. The component can then stay in the DOM, without using the secondary route anymore.

The static content of the component is tranferred successfully but, unfortunately, the bindings are not. That problem has already been reported. A request has been made on Angular Github in issue 20824, to allow moving a component from one container to another. Until that feature request is implemented, that kind of transfer doesn't seem to be possible.