尝试在Angular 4中使用嵌套路由时出现此错误:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null
TypeError: Cannot read property 'component' of null
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (http://localhost:4200/vendor.bundle.js:77976:71)
at http://localhost:4200/vendor.bundle.js:77954:19
at Array.forEach (native)
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (http://localhost:4200/vendor.bundle.js:77953:29)
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (http://localhost:4200/vendor.bundle.js:77985:22)
这是我的路由代码:
const appRoutes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'sobre',
component: SobreComponent
},
{
path: 'c/:concurso', component: ConcursoItemComponent
, children: [
{
path: ':cargo',
component: CargoItemComponent,
children: [
{
path: ':disc',
component: DisciplinaItemComponent,
children: [{
path: ':assunto',
component: AssuntoItemComponent
}]
}
]
}
]
},
];
我想制作以下嵌套规则,每个规则使用变量来通知每个路由的嵌套组件:
/
/ c /:比赛/
/ c /:比赛/:位置/
/ c /:contest /:post /:disc /
/ c /:contest /:post /:disc /:subject
在每个级别上,我将需要所有上层变量来正确查询API的相关对象。
谢谢你的帮助!
正如本文(https://angular-2-training-book.rangle.io/handout/routing/child_routes.html)在处理子路由时所述,就像为应用程序的根定义路由器出口一样,您必须为父组件定义路由器出口(在本例中为ConcursoItemComponent。)从技术上讲也是CargoItemComponent&DisciplinaItemComponent)所以你有2个选择。
{
path: 'c/:concurso,
component: ConcursoItemComponent
},
{
path: 'c/:concurso/:cargo,
component: CargoComponent
},
{
path: 'c/:concurso/:cargo/:disc,
component: DisciplinaItemComponent
},
{
path: 'c/:concurso/:cargo/:disc/:assunto,
component: AssuntoItemComponent
}
这样,路由器将始终将组件插入应用程序根目录的路由器出口。
刚想我会为那些偶然发现这一点的人添加评论,原因与我一样。如果模板使用条件呈现,并且异步满足这些条件,则router-outlet不能位于条件标记内,因为框架可能会在条件满足之前尝试呈现标记。例如:
<div *ngIf="someAsyncCall()">
<header>{{some result from the async call}}</header>
<router-outlet></router-outlet>
</div>
可能会失败,具体取决于异步调用的完成速度。在条件渲染中仅包含标记的静态部分总是更安全。如:
<div *ngIf="someAsyncCall()">
<header>{{some result from the async call}}</header>
</div>
<router-outlet></router-outlet>
我把整个页面包装在一个“忙指示器”指令中,这几乎可以保证路由器插座不会一直无法使用。事后似乎显而易见,但......
如果有人有兴趣参加儿童路线结构。你可以遵循这个模型。我在ngx-breadcrumbs找到了这个。
const myRoutes : Route[] = {
{
path: '',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
},
{
path: 'person',
children: [
{
path: '',
component: PersonListComponent
},
{
path: ':id',
component: PersonDetailComponent
}
]
},
{
path: 'folder',
children: [
{
path: '',
component: FolderComponent
},
{
path: ':id',
component: FolderComponent
}
]
}
};