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>

另见How to use child routes in Angular 2

Angular2中的子路由

1 个答案: