web-dev-qa-db-fra.com

Non capturé (promis): TypeError: Impossible de lire la propriété 'composant' de null

Obtenir cette erreur en essayant d'utiliser Nestet route dans 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)

Ceci est mon code de routage:

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

            }
        ]
    },

];

Je veux créer les règles imbriquées suivantes, chacune utilisant les variables pour informer les composants imbriqués de chaque route:

/

/ c /: concurso /

/ c /: concurso /: cargo /

/ c /: concurso /: cargo /: disque /

/ c /: concurso /: cargo /: disque /: assunto

À chaque niveau, j'aurai besoin de toutes les variables supérieures pour effectuer l'interrogation correcte des objets liés de l'API.

Merci pour toute aide!

javascriptangularroutesangular2-routing
18
lmisael

Comme indiqué dans cet article ( https://angular-2-training-book.rangle.io/handout/routing/child_routes.html ) lorsqu’il s’agit de traiter des itinéraires enfants, tout comme vous définissez un routeur-outlet pour la racine de votre application, vous devez définir un routeur-prise pour votre composant parent (dans ce cas, le ConcursoItemComponent. Et techniquement aussi le CargoItemComponent & DisciplinaItemComponent). Vous avez donc 2 options.

  • Définissez un routeur-prise dans ConcursoItemComponent. Ainsi, le routeur saura où charger le composant enfant (CargoItemComponent) lorsque l'utilisateur se rend sur c /: concurso /: cargo
  • N'utilisez pas d'itinéraires enfants et créez tous vos itinéraires au niveau supérieur du routeur (racine de l'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
}

De cette façon, le routeur insérera toujours le composant dans la prise du routeur à la racine de l'application.

23
LLai

Je pensais juste que j'ajouterais un commentaire au profit de ceux qui tombent par hasard sur la même raison que moi. Si votre modèle utilise le rendu conditionnel et que ces conditions sont satisfaites de manière asynchrone, le routeur-prise ne peut pas se trouver à l'intérieur du balisage conditionnel, car l'infrastructure peut essayer de rendre le balisage avant que la condition ne soit remplie. Par exemple:

<div *ngIf="someAsyncCall()">
   <header>{{some result from the async call}}</header>
   <router-outlet></router-outlet>
</div>

peutéchouer en fonction de la rapidité avec laquelle l'appel asynchrone se termine. Il est toujours plus sûr d'inclure uniquement les parties statiques d'une balise dans le rendu conditionnel. Un péché: 

<div *ngIf="someAsyncCall()">
    <header>{{some result from the async call}}</header>
</div>
<router-outlet></router-outlet>

Je me suis un peu moqué en encapsulant toute la page dans une directive "indicateur d'indisponibilité" qui garantissait à peu près que le routeur-prise ne serait pas disponible tout le temps. Cela semble évident avec le recul, mais ...

3
lje

Si quelqu'un s'intéresse à la structure de route Child. Vous pouvez suivre ce modèle. J'ai trouvé cela dans 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            
      }
    ]
  }
};
0
Manoj De Mel