Angular 2 nested views without AUX URL

Question

I trying Angular 2 Routing.

My application has 4 pages and 4 routes (r1, r2, r3, r4). I want to separate the two groups of these pages. The "content 1" field for r1 and r2 will be the same. For r3 and r4, the "Content 1" field will be the same and the "Content 2" field will change for each route.

I can do this by calling the Component in the Template, but the "Content 1" field is being recompiled.

I do not want to use AUX routing. The URL looks ugly.

I could have done this before in Angular 1. How can I do that in Angular 2?

Answer 1

You can achieve this with by naming router-outlet as follows.

Assuming you are loading appComponent first,

app.component.html

<header></header>
<router-outlet name='content1_r1_r2'><router-outlet/>
<router-outlet name='content1_r3_r4'><router-outlet/>
<router-outlet name='content2'><router-outlet/>
<footer></footer>

configure your router as follows:

{
    path: 'r1', 
    component: 'appComponent',
    children: [
        { path: '', component: contentr12Component, outlet: 'content1_r1_r2' },
        { path: '', component: contentr1Component, outlet: 'content2' }
    ]
}
// write same for r2 just change content1Component you want to load on /r2 route.

{
    path: 'r3',
    component: 'appComponent',
    children: [
        { path: '', component: contentr34Component, outlet: 'content1_r2_r4' },
        { path: '', component: contentr3Component, outlet: 'content2' }
    ]
}

// write same for r4 just change content3Component you want to load on /r4 route.

In the above code contentr12Component will remain same for r1 and r2 route, contentr34Component will remain same for r3 and r4. you can replace names as per your component.

This will avoid ugly looking URL as well.