子ページの角2ルーティングの問題

Question

私は新しい角度2の開発です。私は1つのコンポーネントを追加しました。このコンポーネントの内部には、他のいくつかの子コンポーネントがあります。次の方法でマイフォルダ構造は：parentComponent.htmlで

parentComponent 
    -child1Component 
    -child2Component 
    -child3Component 

iはchild3に<router-outlet></router-outlet>

私は子供2 child1のからのナビゲーションを持っている、と子供2を追加しました。また、私は逆に移動することができます。私はthis._location.back();を使っています。

私はバックボタンを使って後方へ移動します。現在のルートに前のページコンポーネントを表示します。例えば

：

iはボタンを使用してバックCHILD1するchild2の間を移動。 child1のルートはまだchild1のページに子のhtmlの部分を表示しています。

ルーティングのために、私は次のように使用しています：

{ path: "parent", component: parentComponent, 
    children: [ 
    { path: "child1", component: child1Component }, 
    { path: "child2", component: child2Component }, 
    { path: "child3", component: child3Component} 
    ], 
    data: { breadcrumb: 'Parent' } 
} 

私にはわからないのに役立つしなさい起こっなぜ！

バージョン情報

@angular/cli: 1.2.6 
node: 6.10.0 
os: win32 x64 
@angular/animations: 4.3.2 
@angular/common: 4.3.2 
@angular/compiler: 4.3.2 
@angular/core: 4.3.2 
@angular/forms: 4.3.2 
@angular/http: 4.3.2 
@angular/platform-browser: 4.3.2 
@angular/platform-browser-dynamic: 4.3.2 
@angular/router: 4.3.2 
@angular/cli: 1.2.6 
@angular/compiler-cli: 4.3.2 
@angular/language-service: 4.3.2 

Answer 1

それは以下で動作します。

Index.htmlページとParentComponentのhtmlページにrouter-outletを追加します。

--routes.ts

{ 
    path:'', 
    redirectTo:'index.html', 
    pathMatch:'full' 
}, 
{ 
    path:'parent', 
    component:ParentComponent, 
    children:[ 
     { 
      path:"child1", 
      component:Child1Component 
     }, 
     { 
      path:"child2", 
      component:Child2Component 
     }, 
     { 
      path:"child3", 
      component:Child3Component 
     } 
    ] 

} 

--Parent.component.html

<input type="button" (click)="goNext()" value="Next"> <router-outlet></router-outlet> 

--parent.component.ts

goNext() 
    { 
    this.router.navigateByUrl("/parent/child1") 
    } 

child1.html

<input type="button" (click)="goNext()" value="Next"><input type="button" (click)="goBack()" value="Back" /> 

chil1.ts

goNext() 
    { 
    this.router.navigateByUrl("/parent/child2") 
    } 

child2.html

<input type="button" (click)="goNext()" value="Next"><input type="button" (click)="goBack()" value="Back" /> 

child2.ts

goNext() 
    { 
    this.router.navigateByUrl("/parent/child3") 
    } 

child3.html

<input type="button" (click)="goBack()" value="Back" />