Angular2 - 具有多个路由器出口的模板页面

Question

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

如果我们有 20 个页面包含 Menu1 + Footer1 和其他 20 个页面包含 Menu2 + Footer2 等等...

我能想到的最好的是我可以有一个带有 3 个路由器插座的主模板（name="menu"，name="footer, name="main"）。但是我如何构建这个页面有路线吗？因为我只能调用 1 个组件而无需描述其他网点。

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

我怎样才能建立那种结构？

Answer 1

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

可以构建像 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 - 具有多个路由器出口的模板页面

Angular2 - Template pages with multi router-outlets

angular2-template

angular2-routing

angular

MainTemplateComponent1

MainTemplateComponent2