Angular 2 架构：ngModules 和路由器答案

【问题标题】：Angular 2 Architecture: ngModules & RouterAngular 2 架构：ngModules 和路由器
【发布时间】：2017-08-31 02:34:16
【问题描述】：

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

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

任何帮助将不胜感激。

【问题讨论】：

如果您愿意，您可以拥有一百万个嵌套的路由器插座。 Angular 路由器非常强大，你应该查看它的文档和最佳实践
@smnbbrv 你是说 AppModule（AppComponent 的模板）只不过是一个路由器插座，然后 HomeModule 和 MainModule 的导航/菜单都将在其顶级组件中带有路由器插座？见angular.io/guide/router#child-routing-component
正是我的意思

标签： angular angular-ui-router

【解决方案1】：

这是一个例子：

app.component.html

<router-outlet></router-outlet>

带有“无外壳”的视图（例如登录）被路由到这里。 “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 }
])

【讨论】：