angular2 자식 경로를 적절하게 사용하는 방법은 무엇입니까?

Question

각도 샘플 앱을 만들고 있습니다. 내가 얻고 싶은 효과는 다음과 같습니다.

로그인 페이지가 있습니다. 로그인하면 '집'페이지가 표시됩니다. 지금, 홈 페이지는 인증원에 의해 보호되는 간단한 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> 

안돼요 및 compB는 "여기 coponentA"어떤 지침을 많이 이해할 수있을 것이다

"여기 ComponentB"를 표시하는 간단한 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>