Angular 2 个新的 (RC1) 路由器。二级路由器插座只工作一次

Question

这里是 plunker：http://embed.plnkr.co/B8feYX7e6oxvI2u4zmYW/

单击 "Child 1" - 有效。现在点击 "Child 2" - 不起作用。单击 "HOME"。单击 "Child 2" - 有效。现在点击 "Child 1" - 不起作用。

基本上，从应用程序根目录到嵌套路由器出口的导航在每个应用程序生命周期内只能工作一次，或者直到您必须先导航回根目录。

下面是部分代码（完整版请查看 plunker）：

app.component

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `
    <div>
      <a [routerLink]="['/']">HOME</a>
      <a [routerLink]="['/child', 1]">Child 1</a>
      <a [routerLink]="['/child', 2]">Child 2</a>
    </div>
    <div>
      <router-outlet></router-outlet>
    </div>
  `
})

@Routes([
    { path: 'child/:id', component: ChildContainerComponent }
])    

export class AppComponent { }

子-container.component

@Component({
    directives: [ROUTER_DIRECTIVES],
    template: `
 <div>
    <h3>Child outer container</h3>
    <router-outlet></router-outlet>
</div>
`
})

@Routes([
    { path: '/', component: ChildComponent }
])

export class ChildContainerComponent{
}

child.component

@Component({
    template: `
<div>
    Child: Id={{_id}}
</div>
`
})

export class ChildComponent implements OnInit {
    private _id: number;

    private get routeSegment(): RouteSegment {  // must be better way to get value
        return this._router.routeTree._root.children[0].value;
    }

    constructor(private _router: Router) {
    }

    ngOnInit() {
        this._id = +this.routeSegment.getParam('id');
    }
}

Answer 1

您需要将 AppComponent 路由更改为：

@Routes([
    { path: '/child', component: ChildContainerComponent }
])

你的 ChildContainerComponent 路由到：

@Routes([
    { path: ':id', component: ChildComponent }
])

一旦你有了这些路由，你就可以通过实现 OnActivate 接口来获取 Id：

import { Router, RouteSegment, RouteTree, OnActivate, Routes } from '@angular/router';

export class ChildComponent implements OnInit, OnActivate {
    private _id: number;

    routerOnActivate(currRoute: RouteSegment, 
                     prevRoute?: RouteSegment, 
                     currTree?: RouteTree, 
                     prevTree?: RouteTree) {

        this._id = +currRoute.getParam('id');
    }
}

这是一个有效的 plunker

Angular 2 个新的 (RC1) 路由器。二级路由器插座只工作一次

Angular 2 new (RC1) router. Second level router-outlet works only once

router

nested

angular