Javascript 未捕获（承诺）：类型错误：无法读取 null 的属性“组件”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44789867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught (in promise): TypeError: Cannot read property 'component' of null
提问by lmisael
Getting this error when trying to use nestet route in Angular 4:
尝试在 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)
This is my routing code:
这是我的路由代码：
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/:同意/
/c/:concurso/:cargo/
/c/:concurso/:货物/
/c/:concurso/:cargo/:disc/
/c/:concurso/:cargo/:disc/
/c/:concurso/:cargo/:disc/:assunto
/c/:concurso/:cargo/:disc/:assunto
On each level, I will need all the upper variables to make the correct querying of the related objects of the API.
在每个级别上，我将需要所有上层变量来正确查询 API 的相关对象。
Thanks for any help!
谢谢你的帮助！
回答by LLai
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.
正如本文（https://angular-2-training-book.rangle.io/handout/routing/child_routes.html）所述，在处理子路由时，就像为应用程序的根定义路由器出口一样，你必须为你的父组件定义一个路由器出口（在这种情况下是 ConcursoItemComponent。技术上也是 CargoItemComponent 和 DisciplinaItemComponent）所以你有 2 个选择。
- 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)
- 在 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.
这样，路由器将始终将组件插入到应用程序根目录的路由器出口中。
回答by lje
Just thought I'd add a comment for the benefit of those who stumble across this for the same reason I did. If your template uses conditional rendering, and those conditions are satisfied asynchronously, the router-outlet cannot be inside the conditional markup because the framework might try to render the markup before the condition is satisfied. For example:
只是想我会为那些出于同样原因偶然发现此问题的人添加评论。如果您的模板使用条件渲染，并且异步满足这些条件，则路由器出口不能位于条件标记内，因为框架可能会在条件满足之前尝试渲染标记。例如：
<div *ngIf="someAsyncCall()">
<header>{{some result from the async call}}</header>
<router-outlet></router-outlet>
</div>
mayfail depending on how quickly the async call finishes. It's always safer to include only the static parts of a the markup in the conditional rendering. As in:
可能会失败，具体取决于异步调用完成的速度。在条件渲染中只包含标记的静态部分总是更安全。如：
<div *ngIf="someAsyncCall()">
<header>{{some result from the async call}}</header>
</div>
<router-outlet></router-outlet>
I got bit by wrapping the entire page in a "busy indicator" directive which pretty much guaranteed that the router-outlet would not be available all the time. Seems obvious in hindsight, but....
我把整个页面包装在一个“忙碌指示器”指令中，这几乎可以保证路由器插座不会一直可用。事后看来似乎很明显，但是......
回答by Manoj De Mel
If anyone interested in going with Child route structure. You could follow this model. I found this in ngx-breadcrumbs.
如果有人有兴趣使用 Child 路线结构。你可以遵循这个模型。我在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
}
]
}
};
