Angular2路由器：同一个家庭组件上的不同模块

Question

我已经阅读了angular2上的整个路由文档，同时也搜索了一个答案，但是我没有找到解决方案。

我有不同的特征的模块的应用程序。每个功能模块的路由应在每个功能模块内部定义。我想拥有一个家庭组件，并带有一个菜单，让我可以导航到每个功能，顶部栏，页脚等，并且还可以在页面中心找到一个router-outlet。 我想让每个功能模块都在那个router-outlet中呈现。

我应该如何处理这种情况？

在另一个职位的也叫数字体系模块的（虽然我没有广泛的层次结构，只需一个模块打电话回家，包含所有其他功能模块）

我创造了这个与不工作（该功能模块显示在整个页面，而不是在家里的router-outlet）：

app.module.ts

@NgModule({ 
imports: [ 
    BrowserModule, 
    HttpModule, 
    **HomeModule**, 
    **routing**, 
], 
declarations: [ 
    ... 
], 
providers: [ 
    ... 
], 
bootstrap: [AppComponent] 
}) 
export class AppModule {} 

个app.routing.ts这些都是默认路由

const appRoutes: Routes = [ 
    {path: '', component: HomeComponent, canActivate: [AuthGuard]}, 
    {path: 'login', component: LoginComponent}, 
    {path: 'register', component: RegisterComponent}, 
    {path: '**', redirectTo: ''} 
]; 
export const routing = RouterModule.forRoot(appRoutes); 

home.module.ts这是主要的家用模块。该模块进口这里人特征模块（FamiliaModule是一个例子）

@NgModule({ 
imports: [ 
    CommonModule, 
    FormsModule, 
    FamiliaModule 
], 
declarations: [ 

], 
providers: [ 

] 
}) 
export class HomeModule {} 

familia.module.ts最后，一个特征模块定义其路由。

const familiaRoutes: Routes = [ 
{path: 'familias', canActivate: [AuthGuard], component: FamiliasComponent} 

]; 

@NgModule({ 
imports: [ 
    CommonModule, 
    FormsModule, 
    RouterModule.forChild(familiaRoutes), 
    PanelModule, 
    ButtonModule, 
    PanelMenuModule, 
    DataTableModule, 
    SharedModule, 
    DropdownModule, 
    DialogModule, 
    InputTextModule 
], 
declarations: [ 
    FamiliasComponent 
], 
providers: [ 
    AlertService, 
    FamiliaService, 
    EstadoService 
] 
}) 
export class FamiliaModule {} 

如何使FamiliaModule显示在HomeComponent内部？有RootModule.forRoot或forChild与它有关吗？现在，当我转到/时，我可以看到主视图，但当我导航到/familias时，FamiliaComponent会用菜单，标题等替换主视图，并显示在整个页面中。

谢谢！

编辑

澄清

编辑＃2

这里

添加的图像是home.component.html

<div id="layout-sidebar"> 
    <img class="logo-sidebar" /> 
    <p-panelMenu [model]="menuItems" [style]="{'width':'300px'}"></p-panelMenu> 
</div> 
<div id="layout-content"> 
    <div id="top-bar"> 
     <span class="ui-widget">Bienvenido, <b>{{currentUser.nombre}}</b>!</span> 
     <button icon="fa-sign-out" pButton [routerLink]="['/login']" label="Cerrar sesión"></button> 
    </div> 
    <router-outlet></router-outlet> 
</div> 

Answer 1

您是否尝试过使用这样的事情。

{path: '', component: HomeComponent, canActivate: [AuthGuard], 
{path:'familia', component: FamiliaComponent, canActivate: [AuthGuard] 
    ... 

并在家里组件的HTML，您可以使用这样的事情

<!--- title bar ---!> 
<!--- side bar ---!> 
<router-outlet></router-outlet> 

此外，您还可以尝试使用延迟加载你的模块，使您的应用程序速度更快。只是谷歌它导致其他来源可以解释它比我更好。