Angular2の子コンポーネントにルーティングする方法は？

Question

私はプロジェクトの基本セットアップをしようとしています。以下は、私が作成したファイルは、次のとおりです。

app.component.html以下

<div class="jumbotron"> 
    <div class="container"> 
     <div class="col-sm-8 col-sm-offset-2"> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
</div> 

はapp.routes.tsファイル

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { 
     path: 'main', 
     component: MainComponent, 
     children: [ 
     { 
      path: 'main/dashboard',component: DashboardComponent 
     }, 
     { 
      path: 'main/user',component: UserComponent 
     }, 
     { 
      path: 'main/reports',component: ReportsComponent 
     } 
     ] 
    }, 

    { path: '**', redirectTo: 'main' } 
]; 

main.componentの私のルートです。 html

<div id="wrapper"> 
    <app-top-bar></app-top-bar> 
    <router-outlet></router-outlet> 
</div> 

topbar.component.html

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="navbar-header"> 
     <a class="navbar-brand">My Admin</a> 
    </div> 
    <ul class="nav navbar-right top-nav"> 
     <li> 
      <a [routerLink]="['/login']"><i class="fa fa-fw fa-user"></i> Logout</a> 
     </li> 
    </ul> 
    <app-side-bar></app-side-bar> 
</nav> 

sidebar.component.html私がログインしtopbarが含まれている主成分ページ、サイドバーにナビゲートすることができる午前

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav side-nav"> 
    <li [routerLink]="['main/dashboard']" routerLinkActive="active"> 
     <a><i class="fa fa-fw fa-dashboard"></i> Dashboard</a> 
    </li> 
    <li [routerLink]="['main/user']" routerLinkActive="active"> 
     <a ><i class="fa fa-fw fa-bar-chart-o"></i> Users</a> 
    </li> 
    <li [routerLink]="['main/reports']" routerLinkActive="active"> 
     <a><i class="fa fa-fw fa-table"></i> Reports</a> 
    </li> 
    </ul> 
</div>  

ダッシュボード、ユーザ、またはレポートのようなサイドバーコンポーネントのコンテンツを表示するコンテンツセクションとを含む。

ただし、サイドバーコンポーネント（ダッシュボード、ユーザー、レポート）をクリックしようとすると、コンポーネントは画面の右側に表示されません。助けてもらえますか？

Answer 1

こんにちはメイン削除してください/あなたの子供のルート設定から：

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { 
     path: 'main', 
     component: MainComponent, 
     children: [ 
     { 
      path: 'dashboard',component: DashboardComponent 
     }, 
     { 
      path: 'user',component: UserComponent 
     }, 
     { 
      path: 'reports',component: ReportsComponent 
     } 
     ] 
    }, 

    { path: '**', redirectTo: 'main' } 
]; 

とあなたのコードの残りの部分は結構です。

Answer 2

変更：

children: [ 
     { 
      path: 'main/dashboard', component: DashboardComponent 
     }, 
     { 
      path: 'main/user', component: UserComponent 
     }, 
     { 
      path: 'main/reports', component: ReportsComponent 
     } 
     ] 

へ：

children: [ 
     { 
      path: 'dashboard', component: DashboardComponent 
     }, 
     { 
      path: 'user', component: UserComponent 
     }, 
     { 
      path: 'reports', component: ReportsComponent 
     } 
     ] 

そうでなければ、あなたのルートがヒットする/メイン/メイン/ダッシュボードなどのように見えるが必要になります。