孩子路由模塊不加載在同一頁面的內容

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' 
     } 
    ]; 

定義