angular2の子ルートを適切に使用する方法は？

Question

私は角度のあるサンプルアプリケーションを開発中です。私が得たい効果は以下の通りです：

私はログインページを持っています。ログインすると、「ホーム」ページが表示されます。今のところ、ホームページは、authguardによって保護された単純なhtmlです。このページにヘッダーセクションとボディセクションが必要です。これはgmailに似ていますが、上部のセクションはすべての操作で同じままです。たとえば、ログアウトする機能が上部に表示されます。

このヘッダーセクションにルーティングされ、複数のコンポーネントが本体セクションにロードされます。

これは私が持っているものであり、動作しないようです。

const appRoutes: Routes = [ 
{ path: 'login', component: LoginComponent }, 
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] 
    , children: [ 
     {path: 'home', component: HomeComponent, pathMatch: 'full'},    
     { path: 'compb', component: ComponentB, outlet: 'list' }, 
     { path: 'compa', component: ComponentA, outlet: 'list' } 
     ] 
}, 
//{ path: 'compb', component: ComponentB }, 
//{ path: 'compa', component: ComponentA },  

// otherwise redirect to home 
{ path: '**', redirectTo: 'home' } 
]; 

私home.component.html

<div class="col-md-6 col-md-offset-3"> 
<h1>Home</h1> 
<p><a [routerLink]="['/login']">Logout</a></p> 
<p><a [routerLink]="['/compb']">CompB</a></p> 
<p><a [routerLink]="['/compa']">CompA</a></p> 
<br/><br/> 
      <div class="container"> 
      <div class="col-sm-8 col-sm-offset-2"> 
       Here is starting of the body! 
       <router-outlet name="list"></router-outlet> 
       Here is ending of body! 
      </div> 
     </div> 
</div> 

COMPAとCOMPBは "ここComponentB" "ここcoponentA" とを表示するための単純なHTMLページです

どれガイダンスはあまり理解されるであろう。

Answer 1

少しの努力の後、私は子供のルートで動作するようにしました。私app.routes.tsで

は、私が最初に持っていた：

const appRoutes: Routes = [ 
{ path: 'login', component: LoginComponent }, 
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] 
    , children: [ 
     {path: 'home', component: HomeComponent, pathMatch: 'full'},    
     { path: 'compb', component: ComponentB, outlet: 'list' }, 
     { path: 'compa', component: ComponentA, outlet: 'list' } 
     ] 
}, 
//{ path: 'compb', component: ComponentB }, 
//{ path: 'compa', component: ComponentA },  

// otherwise redirect to home 
{ path: '**', redirectTo: 'home' } 
]; 

を私は次のようにそれを変更：

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }, 
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard], children:homeRoutes }, 
// { path: 'home', component: HomeComponent, canActivate: [AuthGuard] 
//  , children: [ 
//   {path: 'home', component: HomeComponent, pathMatch: 'full'},    
//   { path: 'compb', component: ComponentB, outlet: 'list' }, 
//   { path: 'compa', component: ComponentA, outlet: 'list' } 
//   ] 
// },  
    //{ path: 'compb', component: ComponentB }, 
    //{ path: 'compa', component: ComponentA },  

    // otherwise redirect to home 
    { path: '**', redirectTo: 'home' } 
]; 

私はhome.routes.ts

に次を追加しました

export const homeRoutes: Routes = [ 
    { path: 'compa', component: ComponentA }, 
    { path: 'compb', component: ComponentB }, 

]; 

私のhome.component.htmlに、私は以下を追加しました：

<div class="col-md-6 col-md-offset-3"> 
    <h1>Home</h1> 
    <p><a [routerLink]="['/login']">Logout</a></p> 
    <p><a [routerLink]="['compb']">CompB</a></p> 
    <p><a [routerLink]="['compa']">CompA</a></p> 
    <br/><br/><br/><br/><br/><br/> 
       <div class="container"> 
       <div class="col-sm-8 col-sm-offset-2"> 
        Here is starting of the body!!<br/> 
        <router-outlet></router-outlet> 
        Here is ending of body!! 
       </div> 
      </div> 
</div>