如何使用angular2儿童路线propely？

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的是简单的HTML页面，显示 “coponentA这里” 和 “以componentB这里”

任何指导意见将非常感激。

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>