未捕获(承诺中):TypeError:无法读取 null 的属性“组件" [英] Uncaught (in promise): TypeError: Cannot read property 'component' of null

问题描述

尝试在 Angular 4 中使用嵌套路由时出现此错误:

Getting this error when trying to use nestet route in 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
                        }]
                    }
                ]

            }
        ]
    },

];

我想做如下嵌套规则，每一个都使用变量来通知每条路由的嵌套组件:

I want to make the following nested rules, each one using the variables to inform the nested components of each route:

/

/c/:concurso/

/c/:concurso/

/c/:concurso/:cargo/

/c/:concurso/:cargo/

/c/:concurso/:cargo/:disc/

/c/:concurso/:cargo/:disc/

/c/:concurso/:cargo/:disc/:assunto

/c/:concurso/:cargo/:disc/:assunto

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

On each level, I will need all the upper variables to make the correct querying of the related objects of the API.

感谢您的帮助！

推荐答案

如本文(https://angular-2-training-book.rangle.io/handout/routing/child_routes.html) 状态时处理子路由，就像你定义一个路由器出口对于您的应用程序的根，您必须为您的父组件(在本例中为 ConcursoItemComponent.技术上还包括 CargoItemComponent 和 DisciplinaItemComponent)定义一个路由器出口，因此您有 2 个选项.

As this article (https://angular-2-training-book.rangle.io/handout/routing/child_routes.html) states when dealing with child routes, just as you define a router-outlet for the root of your application, you must define a router-outlet for your parent component (in this case the ConcursoItemComponent. And technically also the CargoItemComponent & DisciplinaItemComponent) So you have 2 options.

• 在 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
}

这样路由器将始终将组件插入到应用程序根目录的路由器插座中.

This way the router will always insert the component into the router-outlet at the root of the application.

这篇关于未捕获(承诺中):TypeError:无法读取 null 的属性“组件"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！