wake-up-neo.net

Nicht erfasst (Versprechung): TypeError: Die Eigenschaft 'Komponente' von Null kann nicht gelesen werden

Diese Fehlermeldung wird angezeigt, wenn Sie versuchen, die verschachtelte Route in Angular 4 zu verwenden:

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)

Dies ist mein 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
                        }]
                    }
                ]

            }
        ]
    },

];

Ich möchte die folgenden verschachtelten Regeln erstellen, die jeweils die Variablen verwenden, um die verschachtelten Komponenten über jede Route zu informieren:

/

/ c /: concurso /

/ c /: concurso /: cargo /

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

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

Auf jeder Ebene benötige ich alle oberen Variablen, um die zugehörigen Objekte der API korrekt abzufragen.

Danke für jede Hilfe!

javascriptangularroutesangular2-routing
18
lmisael

Wie in diesem Artikel ( https://angular-2-training-book.rangle.io/handout/routing/child_routes.html ) angegeben, wenn mit untergeordneten Routen gearbeitet wird, so wie Sie einen Router-Ausgang für das Stammverzeichnis festlegen In Ihrer Anwendung müssen Sie einen Router-Ausgang für Ihre übergeordnete Komponente definieren (in diesem Fall die ConcursoItemComponent. Und technisch auch die CargoItemComponent & DisciplinaItemComponent). Sie haben also 2 Optionen.

  • Definieren Sie einen Router-Ausgang in der ConcursoItemComponent. Auf diese Weise weiß der Router, wohin die untergeordnete Komponente (CargoItemComponent) geladen werden soll, wenn der Benutzer c /: concurso /: cargo besucht
  • Verwenden Sie keine untergeordneten Routen und erstellen Sie alle Ihre Routen auf oberster Routerebene (Stammverzeichnis der Anwendung).

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

Auf diese Weise fügt der Router die Komponente immer in die Router-Steckdose im Stammverzeichnis der Anwendung ein

23
LLai

Ich dachte nur, ich würde einen Kommentar zum Vorteil derer hinzufügen, die aus dem gleichen Grund wie ich darüber stolpern. Wenn Ihre Vorlage das bedingte Rendern verwendet und diese Bedingungen asynchron erfüllt sind, kann sich der Router-Outlet nicht im bedingten Markup befinden, da das Framework möglicherweise versucht, das Markup zu rendern, bevor die Bedingung erfüllt ist. Zum Beispiel:

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

kannfehlschlagen, je nachdem, wie schnell der asynchrone Anruf beendet wird. Es ist immer sicherer, nur die statischen Teile eines Markups in das bedingte Rendering aufzunehmen. Wie in: 

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

Ich bekam ein bisschen, indem ich die gesamte Seite in eine Anweisung "Beschäftigt" einwickelte, was ziemlich sicherstellte, dass der Router-Ausgang nicht immer verfügbar war. Im Nachhinein offensichtlich, aber ....

3
lje

Wenn jemand daran interessiert ist, mit Child-Routenstruktur zu gehen. Sie könnten diesem Modell folgen. Ich habe dies in ngx-breadcrumbs gefunden. 

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