我已閱讀並觀看了很多angular2課程和教程，並且它們都描述了一個具有stastic菜單和靜態頁腳的網頁。所以他們使用router-outlet來訪問主要內容。Angular2 - 具有多個路由器排版的模板頁

如果我們有20頁與菜單1 + Footer1等20個網頁與菜單2 + Footer2等等

我能想到的最好的是，我可以有一個主模板，3路由器網點（名=「菜單」，名字=「頁腳，NAME =」主「），但我怎麼能建立與路線此頁面呢？因爲我只能調用1組件，而不描述其他店鋪。

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

哪有我建立那種結構？

來源

2016-11-09 Michalis

如果我們有20頁與菜單1 + Footer1等20個網頁與菜單2 + Footer2等什麼...

這是不可能建立的結構一樣，在角2

工作的代碼示例Plunker

你可以做到這一點做這些：

應該有一個主要的出口，這意味着，應該有一個router-outlet沒有attri bute名字。例如：

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

準每router-outlet（非主出口）以一定的組件，該組件需要指定對應用程序的路由配置。您可以通過創建 Componentless Routes配置做到這一點，然後指定每個「路由器出口」嵌套路線，每條路線關聯組件，例如

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

來源

2016-11-10 08:01:08 Michael

尼斯....一些問題。如果我想讓頁腳與一組頁面相似，該怎麼辦？現在我必須將出口設置爲每個根路徑。 – Michalis

@Michalis對此，有一個解決方法，所以你不需要在每個根路徑上設置插座，我們可以創建一個變量來保存插座設置，並在需要它的每個路徑上使用它。這樣，你有更大的控制權。 – Michael

我就在想，如果我可以做這樣的事情

{ 
    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 /第1頁....它使用具有路由網點

MainTemplateComponen主要MainTemplateComponent1 T1

<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>

所以主根成分可能是模板和孩子組件可能是路由的出口量

來源

2016-11-10 13:35:31 Michalis

Angular2 - 具有多個路由器排版的模板頁

回答

MainTemplateComponen主要MainTemplateComponent1 T1

MainTemplateComponent2

相關問題