Angular2中的子路由

Question

我有一個父組件

parent.html

  @RouteConfig([        
    { path: '/ChildOne', component: ChildOne, name: "ChildOne",useAsDefault: true},
    { path: '/ChildTwo', component: ChildTwo, name: "ChildTwo"}
 ])

parent.ts

<a [routerLink]="['./ChildOne',{Id:5}]">childOne </a>
<a [routerLink]="['./ChildTwo',{Id:1}]">chilTwo </a>    

child1組件

childOne.ts

constructor(public params: RouteParams)
    { this.childId=params.get("Id"); }

childOne.html

{{childId}}

child2組件

childTwo.ts

constructor(public params: RouteParams)
    { this.childId=params.get("Id"); }

childTwo.html

{{childId}}

現在的問題是childOne的'Id'在默認情況下未獲取（useAsDefault）。

在單擊childOne或childTwo之后獲得“ id”時

Answer 1

為了表明一條路線有子路線，請在路徑上添加...

{ path: '/ChildOne/...', component: ChildOne, name: "ChildOne",useAsDefault: true},
{ path: '/ChildTwo/...', component: ChildTwo, name: "ChildTwo"},   

並將子組件添加到路由器鏈接

<a [routerLink]="['./ChildOne', 'ChildOne', {Id:5}]">childOne </a>
<a [routerLink]="['./ChildTwo', 'ChildTwo', {Id:1}]">chilTwo </a> 

另請參閱如何在Angular 2中使用子路線