Angular2中的子路由答案

【问题标题】：Child Routing in Angular2Angular2中的子路由
【发布时间】：2016-02-17 12:02:25
【问题描述】：

我有一个父组件

父.html

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

父.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”时

【问题讨论】：

标签： angular angular2-routing

【解决方案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>

另见How to use child routes in Angular 2

【讨论】：