未捕获(在承诺中):TypeError:无法读取null的属性“component” [英] Uncaught (in promise): TypeError: Cannot read property 'component' of null
问题描述
在Angular 4中尝试使用nestet路由时出现此错误:
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。在技术上也是C argoItemComponent& 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中定义一个router-outlet。这样,当用户访问c /:concurso /:cargo 时,路由器将知道加载子组件的位置(CargoItemComponent)
- 不要使用子路由而是使所有路由在顶级路由器级别(应用程序的根目录)
- Define a router-outlet in the ConcursoItemComponent. This way the router will know where to load the child component (CargoItemComponent) when the user visits c/:concurso/:cargo
- Don't use child routes and instead make all of your routes at the top router level (root of the application)
{
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的属性“component”的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!