Question

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

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

非常感谢任何帮助。

Answer 1

以下是一个例子：

<强> app.component.html

<router-outlet></router-outlet>

观看＆＃34;没有shell＆＃34;例如登录在这里路由。就像＆＃34; shell＆＃34;成分

<强> shell.component.html

<pm-menu></pm-menu>

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

所有其他页面都路由到此子路由器插座。

我只有一个＆＃34; shell＆＃34;，但你可以轻松拥有一个＆＃34; home shell＆＃34;和一个＆＃34;主壳＆＃34;两者都将路由到主应用程序组件的路由器插座。

这些路线看起来像这样：

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＆amp;路由器

1 个答案: