Angular 2架構：ngModules＆路由器

我打算建立一個網站，但在架構上存在一些混淆。通常，網站有一個「家庭」應用程序。具體而言，這是您推銷主要應用程序的地方，可以提供Q & A，博客，聯繫我們，定價等等，這些可能非常大。一旦用戶登錄系統，然後他們進入「主」應用程序。Angular 2架構：ngModules＆路由器

問題是，只有一個路由器插座，兩個應用程序都有完全不同的導航菜單，可用於每條路線。如果我在AppModule下有HomeModule和MainModule，我應該在AppComponent的模板中使用* ngIf作爲我的nav/menues組件用於每個相應的應用程序和一個路由器插座？我真的不清楚你如何在兩個完全不同的應用程序之間進行導航，這些應用程序有自己的菜單和只有一個路由器插座。另一種選擇是在每個模板上爲HomeModule和MainModule包含導航/菜單/頁腳，而在AppComponent的模板中基本上只有一個路由器插件，這不是一個可伸縮的解決方案。

任何幫助將不勝感激。

來源

2017-08-30 tommyc38

你可以有嵌套路由器網點的一百萬，如果你想。 Angular路由器功能非常強大，你應該檢查它的文檔和最佳實踐 – smnbbrv

@smnbbrv你是說那麼AppModule（AppComponent的模板）只不過是一個路由器插座，然後HomeModule和MainModule都會有他們的nav/menues路由器插座的頂層組件？請參閱https://angular.io/guide/router#child-routing-component – tommyc38

這正是我的意思 – smnbbrv

下面是一個例子：

app.component.html

<router-outlet></router-outlet>

查看「無殼」，如登錄這裏路由。正如「殼」組件一樣。

shell.component.html

<pm-menu></pm-menu> 

<div class='container'> 
    <router-outlet></router-outlet> 
</div>

所有其他網頁被路由到這個孩子路由器的出口。

我只有一個「外殼」，但您可以輕鬆擁有「主外殼」和「主外殼」兩者都將路由到主應用程序組件的路由器插座。然後

的路線將是這個樣子：

RouterModule.forRoot([ 
    { 
     path: 'app', 
     component: MainShellComponent, 
     children: [ 
      { path: 'page1', component: Page1Component }, 
      { path: 'page2', component: Page2Component }, 
     ] 
    }, 
    { 
     path: '', 
     component: HomeShellComponent, 
     children: [ 
      { path: 'welcome', component: WelcomeComponent }, 
      { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 
     ] 
    }, 
    { path: '**', component: PageNotFoundComponent } 
])

來源

2017-08-30 18:27:02 DeborahK

Angular 2架構：ngModules＆路由器

回答

相關問題