子ルーティングモジュールが同じページにコンテンツをロードしていません

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

のように定義されるようになっています