MainTemplateComponent1

Question

我已经阅读并观看了许多angular2课程和教程，所有这些课程都描述了一个带有stastic菜单和静态页脚的网页。所以他们使用router-outlet来获取主要内容。

如果我们有20页的Menu1 + Footer1和其他20页的Menu2 + Footer2等，该怎么办...

我能想到的最好的是我可以拥有一个带有3个路由器插座的主模板（名称=＆＃34;菜单＆＃34;，名称=＆＃34;页脚，名称=＆＃34;主要＆＃34 ）。但是我如何用路线建立这个页面？因为我只能打电话给1个组件而不描述其他的插座。

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

我如何建立这种结构？

Answer 1

如果我们有20页的Menu1 + Footer1和其他20页的Menu2 + Footer2等，该怎么办...

可以在Angular 2中构建类似的结构。

工作代码示例Plunker

你可以做到这一点：

应该有一个主要插座，这意味着应该有一个router-outlet没有属性名称。例如：

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

将每个router-outlet（非主要插座）与某个组件相关联，您需要在应用程序路由配置中指定该组件。你通过创建来做到这一点 Componentless Routes配置，然后为每个'router-outlet'指定每个关联组件作为嵌套路由，例如

@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
                ] 
            }
        ])
        // ....
    ]
    // ....
}
// ....

Answer 2

我在想我是否可以做那样的事情

{ 
    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}
    ]
}

当我调用/ main1 / page1 ....它使用具有路径出口的主MainTemplateComponent1

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>

因此主要根组件可以是模板，子组件可以是路由出口内容

Angular2 - 具有多路由器插座的模板页面

2 个答案:

MainTemplateComponent1

MainTemplateComponent2