孩子路由模块不加载在同一页面的内容

Question

我正在处理指示与角2的小应用程序。[身份验证+ 2屏幕]，我有一个问题，管理我的路由参数。

我到路由文件所做的app.routing.ts本金，再加上儿童路由文件admin.routing.ts，每当我成功验证，重定向就是家路径制成，这个页面我必须通过子路由器管理组件，每当我点击链接时，我希望在同一屏幕上加载内容，但路由器会重新加载整个页面。

app.routing.ts

 const appRoutes: Routes = [ 
     { 
     path: 'home', 
     component : HomeComponent, 
     canActivate : [AuthGard] 
     }, 
     { 
     path: 'login', 
     component : LoginComponent 
     }, 
     { 
     path: 'not-found', 
     component: NotFoundComponent 
     }, 
     { 
     path: '', 
     redirectTo: 'login', 
     pathMatch: 'full' 
     }, 
     { 
     path: '**', 
     redirectTo : 'not-found', 
     pathMatch: 'full' 
     } 
    ]; 

    export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

adminRouting.ts（孩子）

const appRoutes: Routes = [ 

    { 
    path: 'add-merchant-admin', 
    component : AddMerchantAdminComponent, 
    canActivate : [AuthGard] 
    }, 
    { 
    path: 'list-merchant-admin', 
    component : ListMerchantAdminComponent, 
    canActivate : [AuthGard] 
    } 
]; 

home.component.html

<app-template-component></app-template-component> 
<app-sidebar-nav></app-sidebar-nav> 

个template.component.html

<div class="wrapper"> 
    <div class="main-panel"> 

    <app-nav-bar></app-nav-bar> 

    <div class="content"> 
     <div class="container-fluid"> 
      <router-outlet></router-outlet> ** Content expected to be loaded here ** 
     </div> 
    </div> 

    <footer class="footer"> 
     <div class="container-fluid"> 
     <div class="copyright pull-right"> 
      &copy; <script>document.write(new Date().getFullYear())</script> S2M 2017 
     </div> 
     </div> 
    </footer> 

    </div> 
</div> 

图

，而不是加载在指定位置的内容，它加载其他页面。

Answer 1

子路由都应该是这样

const appRoutes: Routes = [ 
     { 
     path: 'home', 
     component : HomeComponent, 
     canActivate : [AuthGard], 
     children:[ 
     { 
      path:'', 
      component:ChildComponent, 
      children: appRoutesChild 
     } 
     ] 
     }, 
     { 
     path: 'login', 
     component : LoginComponent 
     }, 
     { 
     path: 'not-found', 
     component: NotFoundComponent 
     }, 
     { 
     path: '', 
     redirectTo: 'login', 
     pathMatch: 'full' 
     }, 
     { 
     path: '**', 
     redirectTo : 'not-found', 
     pathMatch: 'full' 
     } 
    ]; 

定义