未捕获（承诺中）：TypeError：无法读取 null 的属性“组件”

Question

在 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/:concurso/

/c/:concurso/:cargo/

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

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

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

感谢您的帮助！

Answer 1

正如本文 (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
}

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

Answer 2

如果有人有兴趣使用子路由结构。你可以遵循这个模型。我在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            
      }
    ]
  }
};

Answer 3

只是想我会添加评论，以帮助那些出于与我相同的原因偶然发现此问题的人。如果您的模板使用条件渲染，并且这些条件是异步满足的，则路由器插座不能在条件标记内，因为框架可能会在满足条件之前尝试渲染标记。例如：

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

我通过将整个页面包装在一个“忙指示符”指令中得到了一点好处，这几乎可以保证路由器插座不会一直可用。事后看来似乎很明显，但是....