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中使用子路线