Angular2 router in one component

Question

I write Angular2 app with router like /main /item . App have a lot of filter tables/trees/combobox. I want in /main page open bootstrap modal window (for example call @component modalFilterWindow) and switch content in this window like router.

I can do it like

<first-filter-content ngIf="currentFilter=='first'">
<second-filter-content ngIf="currentFilter=='second'">
....

but it can be made more beautiful

...modal window
<router-outlet></router-outlet>

and switch in modalFilterWindow content by routes, dont change state of main component.

So one component must have own router, not affecting parent router and component.

is it possible?

Answer 1

You can define routes to show components in a named <router-outlet>

Route config

{path: '/chat', component: ChatCmp, outlet: 'aux'}

Named router outlet

<router-outlet name="aux">

Navigate aux routes

this._router.navigateByUrl("/crisis-center(aux:chat;open=true)");

It seems navigating aux routes from routerLink is not yet supported

<a [routerLink]="['/team/3(aux:/chat;open=true)']">Test</a>

I have not tried this yet