我有以下仅作为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`]);
}
}