javascript - tablas - Uncaught(en promesa): TypeError: no se puede leer la propiedad ''component'' de null

obtener datos de una tabla html javascript

Question

Obteniendo este error al intentar usar la ruta nestet en 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)

Este es mi código de enrutamiento:

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
}]
}
]
}
]
},
];

Quiero hacer las siguientes reglas anidadas, cada una usando las variables para informar a los componentes anidados de cada ruta:

/

/ c /: concurso /

/ c /: concurso /: cargo /

/ c /: concurso /: cargo /: disco /

/ c /: concurso /: cargo /: disco /: assunto

En cada nivel, necesitaré todas las variables superiores para realizar la consulta correcta de los objetos relacionados de la API.

¡Gracias por cualquier ayuda!

Answer 1

Como dice este artículo ( https://angular-2-training-book.rangle.io/handout/routing/child_routes.html ) cuando se trata de rutas secundarias, del mismo modo que se define una salida de enrutador para la raíz de su aplicación, debe definir una salida de enrutador para su componente principal (en este caso, el ConcursoItemComponent. Y, técnicamente, también CargoItemComponent y DisciplinaItemComponent). De modo que tiene 2 opciones.

• Defina una salida de enrutador en ConcursoItemComponent. De esta forma, el enrutador sabrá dónde cargar el componente secundario (CargoItemComponent) cuando el usuario visite c /: concurso /: cargo
• No utilice rutas secundarias y, en su lugar, realice todas sus rutas en el nivel de enrutador superior (raíz de la aplicación)

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

De esta forma, el enrutador siempre insertará el componente en la salida del enrutador en la raíz de la aplicación