Angular 2 架构：ngModules 和路由器

Question

我打算建立一个网站，但对架构有些困惑。通常网站有一个 "home" 应用程序。具体来说，这是您营销主要应用程序、提供问答、博客、联系我们、定价等可能非常大的地方。一旦用户登录系统，他们就会进入 "main" 应用程序。

问题是只有一个路由器插座，并且两个应用程序在每条路线上都有完全不同的导航菜单。如果我在 AppModule 下有 HomeModule 和 MainModule，我应该为我的 nav/menues 组件使用 *ngIf 吗？我真的不清楚你如何在两个完全不同的应用程序之间导航，它们有自己的菜单并且只有一个路由器插座。另一种选择是在 HomeModule 和 MainModule 的每个模板中包含 nav/menus/footers 并且基本上在 AppComponent 的模板中只有路由器出口，这不是一个可扩展的解决方案。

如有任何帮助，我们将不胜感激。

Answer 1

这是一个例子：

app.component.html

<router-outlet></router-outlet>

具有 "no shell" 的视图（例如登录）被路由到此处。与 "shell" 组件一样。

shell.component.html

<pm-menu></pm-menu>

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

所有其他页面都路由到此子路由器出口。

我只有一个 "shell"，但你可以很容易地拥有一个 "home shell" 和一个 "main shell" 两者都会被路由到主要应用程序组件的路由器出口。

路线将如下所示：

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

Angular 2 架构：ngModules 和路由器

Angular 2 Architecture: ngModules & Router

angular-ui-router

angular