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?

It was possible in the old Router, but since they're rewriting the Router completely, it seems you have to wait for it. — Maximilian Riegler, Jun 22 '16 at 11:55
There are issues with aux routes but basic support should be included. — Günter Zöchbauer, Jun 22 '16 at 12:03

score 0 · Answer 1 · edited Jul 01 '16 at 00:34

0

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

edited Jul 01 '16 at 00:34

Neoheurist

3,183
6
37
55

answered Jun 22 '16 at 12:17

Günter Zöchbauer

623,577
216
2,003
1,567

See also https://github.com/angular/angular/issues/9448 for a related issue and a Plunker with an aux-route example. – Günter Zöchbauer Jun 22 '16 at 15:05
We need to add outlet name in path as well? This doesn't sound great. I should be allowed to route to a component in any available route – Arpit Agarwal Jun 25 '16 at 12:43
I don't understand what you mean. – Günter Zöchbauer Jun 25 '16 at 20:12
{path: '/chat', component: ChatCmp, outlet: 'aux'}. Why should we specifiy outlet here? – Arpit Agarwal Jun 26 '16 at 04:43
Do you have a spcific use case? Routes are to configire the router. How should it know whete to place components if you don't specify it. If you don't specify an outlet it's added to the default outlet. – Günter Zöchbauer Jun 26 '16 at 06:58
Shouldn't it pick the outlet from URL this._router.navigateByUrl("/crisis-center(aux:chat;open=true)"). V2 router used to do that. In my usecase depending upon user selection I want to put chat component in primary or aux route. – Arpit Agarwal Jun 26 '16 at 17:17
Actually I don't know. I didn't experiment a lot wirg aux routes because they are nor yet fully funtional. – Günter Zöchbauer Jun 26 '16 at 17:19

Angular2 router in one component

1 Answers1

Linked