Can we have multiple angular2+?

Question

If it is possible to have multiple router outlets, I don't have any working code but assume I have login page in parent <router-outlet> in AppComponent. Once logged in I have to show MyHomeComponent in the parent <router-outlet>. Now, assume that, in MyHomeComponent I want a child <router-outlet> in which I want to show inbox messages, outbox messages, starred messages as user clicks on Inbox, Outbox and Starred links. Please help me to find an answer to this question

AppComponent <router-outlet></router-outlet>,

HomeComponent

<a routerLink="/xyz">Inbox</a>
<a routerLink="/abc">Outbox</a>
<router-outlet name='outlet1'></router-outlet>

My routes paths

{ path: 'login', component: LoginComponent},
 { path: '', component: LoginComponent },
 { path: 'user', children:[ 
         { path: ':name',children:[ 
               {path:'abc', component: InboxComponent, outlet: 'outlet1' },                                      
               {path:'xyz', component: OutboxComponent, outlet:'outlet1' } 
    ] }]}, 
    { path: '**', component: PageNotFoundComponent }

How did you resolve this? – Dheeraj Agrawal Feb 07 '17 at 07:58 — Dheeraj Agrawal, Feb 07 '17 at 07:58

score 7 · Accepted Answer · edited May 23 '17 at 12:18

7

You can have one primary <router-outlet> for every route and additional named <router-outlet name="abc">s. The routes addressing these named outlets are called auxiliary routes. These routes are reflected in the URL within () like /crisis-center(aux:chat;open=true)"

See also

edited May 23 '17 at 12:18

Community

1
1

answered Sep 09 '16 at 06:52

Günter Zöchbauer

623,577
216
2,003
1,567

I did some thing like, Showed login page in primary outlet and after login I displayed Home Page in the same outlet. Now, I want to show inbox and outbox messages in child router outlet but If i use as you said, the primary outlet is replaced by child outlet – Mr_Perfect Sep 09 '16 at 07:10
I don't know aux routes very well myself but without seeing the code that demonstrates what you tried I have don't see a way to diagnose the problem at all. – Günter Zöchbauer Sep 09 '16 at 07:13
Please edit your question and add the code there. Code in comments is unreadable. – Günter Zöchbauer Sep 09 '16 at 07:33
Actually I don't know what the `outlet: 'xxx'` in the route configuration does or if it does anything. What I have seen is components created in named outlets when a routerLink or `router.navigate()` passes an `{outlets: ...}` object like shown in examples in some of the linked docs in my answer. – Günter Zöchbauer Sep 09 '16 at 08:10

Can we have multiple angular2+?

1 Answers1