具有参数的Angular2路由与另一个路由冲突

Question

我有以下仅作为router-outlet

的组件

@Component({
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES]
})
@Routes([
    {
        path: '',
        component: ItemListComponent,
    },
    {
        path: '/:id',
        component: ItemInfoComponent
    },
    {
        path: '/new',
        component: NewItemComponent
    },
    {
        path: '/:id/edit',
        component: ModifyItemComponent
    }
])
export class ItemComponent {}

它正确地路由到ItemListComponent，我有一个带有项目的数据表。当我点击某个项目时，它会加载ItemInfoComponent。但是当我想转到new或edit页面时，它无效。 /new路由重定向到ItemInfoComponent，/edit路由根本不起作用。 棘手的部分是，ItemInfoComponent是一个非终端路由组件，它也定义了子路由：

@Component({
    templateUrl: 'app/info/info.component.html',
    directives: [ROUTER_DIRECTIVES],
})
@Routes([
    {
        path: '/details',
        component: ItemDetailsComponent
    },
    {
        path: '/history',
        component: ItemHistoryComponent
    },
    {
        path: '/logs',
        component: ItemLogsComponent
    }
])
export class ItemInfoComponent implements OnActivate {
...
}

此外，我ItemListComponent中的路由部分如下所示：

export class ItemListComponent extends ListComponent<Item> implements OnActivate {

    private currSegment: RouteSegment;

    constructor(
        private router: Router) {
    }

    routerOnActivate(curr: RouteSegment, prev: RouteSegment, currTree: RouteTree) {
        this.currSegment = curr;
    }

    gotoDetail(event: any) {
        var id = event.target.innerText;
        this.router.navigate([`./${id}`], this.currSegment);
    }

    gotoNewCashRegister(){
        this.router.navigate(['/new']);
    }

    gotoModify(event: any){
        this.router.navigate([`/${this.selectedItems[0].id }/edit`]);
    }
}