Angular2 - Template pages with multi router-outlets

1
votes

I have read and watch many angular2 courses and tutorials and all of them describe a web page with stastic menu and static footer. So they use router-outlet to the main content.

What if we have 20 pages with Menu1 + Footer1 and other 20 pages with Menu2 + Footer2 etc...

The best i can think is that I could have a main template with 3 router-outlets (name="menu", name="footer, name="main"). But how can i build this page with the routes? Because I can call only 1 component without describe the other outlets.

<div>
    <router-outlet name="menu"></router-outlet>
    <router-outlet name="main"></router-outlet>
    <router-outlet name="footer"></router-outlet>
</div>

How can I build that kind of structure?

2
angularangular2-routingangular2-template

2 Answers

2
votes

What if we have 20 pages with Menu1 + Footer1 and other 20 pages with Menu2 + Footer2 etc...

It is possible to build structure like that in Angular 2.

Working code example Plunker

You can achieve that doing these :

  1. There should be one primary outlet, which mean, there should be one router-outlet without attribute name. For example : 

    <router-outlet name='header'></router-outlet>
<router-outlet></router-outlet> 
<router-outlet name='footer'></router-outlet>

  2. Associate each router-outlet (non primary outlet) with a certain component, which you need to specify on your application routes configuration. You do this by creating Componentless Routes configuration, then specify each associating component for each 'router-outlet' as nested routes, for example

    @NgModule({
    imports: [ 
        // ....
        RouterModule.forRoot([
            { 
                path: 'pageA', 
                children : [
                    {path:'', component: PageWithVariantA}, // will be rendered inside primary router-outlet
                    {path:'', component: HeaderVariantA, outlet:'header'}, // will be rendered inside header router-outlet
                    {path:'', component: FooterVariantA, outlet:'footer'} // will be rendered inside footer router-outlet
                ] 
            }
        ])
        // ....
    ]
    // ....
}
// ....
0
votes

I was thinking if I can do something like that

{ 
    path: 'main1', 
    component: MainTemplateComponent1, 
    children : [
        { path: '/page1', component: Component1},
        { path: '/page2', component: Component2}
    ]
},
{ 
    path: 'main2', 
    component: MainTemplateComponent2, 
    children : [
        { path: '/page1', component: Component3},
        { path: '/page2', component: Component4}
    ]
}

And when I call /main1/page1.... it uses the main MainTemplateComponent1 which have the route-outlets

MainTemplateComponent1

<main-menu-1></main-menu-1>
<route-outlet></route-outlet>
<footer-1></footer-1>

MainTemplateComponent2

<main-menu-2></main-menu-2>
<route-outlet></route-outlet>
<footer-2></footer-2>

So the main root component could be the template and the children components could be the route-outlet content