javascript – Uncaught(在promise中)：TypeError：无法读取null的属性’component’

尝试在Angular 4中使用nestet路由时出现此错误：

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 /：concurso /

/ C /：concurso /：货物/

/ C /：concurso /：货物/：盘/

/ C /：concurso /：货物/：盘/：ASSUNTO

在每个级别上,我将需要所有上层变量来正确查询API的相关对象.

谢谢你的帮助！

解决方法:

正如本文(https://angular-2-training-book.rangle.io/handout/routing/child_routes.html)所述,当处理子路由时,就像为应用程序的根定义路由器出口一样,您必须为父组件定义路由器出口(在本例中为ConcursoItemComponent.技术上也是CargoItemComponent& DisciplinaItemComponent)所以你有2个选择.

>在ConcursoItemComponent中定义路由器插座.这样,当用户访问c /：concurso /：cargo时,路由器将知道加载子组件(CargoItemComponent)的位置
>不要使用子路由,而是将所有路由设置在顶级路由器级别(应用程序的根目录)

{
    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
}

这样,路由器将始终将组件插入应用程序根目录的路由器出口.

标签：javascript,angular,routes,angular2-routing
来源： https://codeday.me/bug/20191005/1856373.html