Угловой 2 новый (RC1) маршрутизатор. Маршрутизатор второго уровня работает только один раз

Question

Здесь находится плункер: http://embed.plnkr.co/B8feYX7e6oxvI2u4zmYW/

Нажмите «Ребенок 1» - работает. Теперь нажмите «Child 2» - не работает. Нажмите «HOME». Нажмите «Child 2» - работает. Теперь нажмите «Ребенок 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:

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