Seltsame Router Verhalten

Question

In meinem Angular2 Anwendung habe ich ein Routing-Modul wie folgt aus:

RouterModule.forChild([{ 
      path: '', 
      component: HomeComponent, 
      children: [ 
       { path: '', redirectTo: 'explorer/0' }, 
       { path: 'explorer', redirectTo: 'explorer/0' }, 
       { 
        path: 'explorer/:id', 
        component: EntitiesExplorerComponent, 
        children: [ 
         { path: 'details', component: EntityDetailsComponent } 
        ] 
       }, 
      ] 
     }, 

Wie Sie die explorer Pfad hat ein Kind sehen kann.

Die seltsame Sache ist, dass, wenn ich zu /explorer/1 navigieren, bekomme ich einen Fehler. Aber wenn ich zu navigieren, funktioniert alles gut.

Ich würde gerne einen Explorer vorstellen, wenn ich gehe zu /explorer/ID und die Details einer Entität, wenn ich gehe zu /explorer/ID/details.

Dies ist der Fehler: (es scheint, als ob es nicht /explorer/ID erkennt)

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'routes' of undefined 
TypeError: Cannot read property 'routes' of undefined 
    at getChildConfig (http://localhost:4200/main.bundle.js:61682:35) 
    at Recognizer.processSegmentAgainstRoute (http://localhost:4200/main.bundle.js:61648:27) 

Answer 1

Ihre Router-Konfiguration mehr sollte wie folgt aussehen:

RouterModule.forChild([{ 
    path: '', 
    component: HomeComponent, 
    children: [ 
     { path: '', redirectTo: 'explorer' },    
     { 
      path: 'explorer',     
      component: AnotherComponentWithARouterOutlet, 
      children: [ 
       { 
        path: '', 
        redirectTo: '0', 
       }, 
       { 
        path: ':id', 
        component: EntitiesExplorerComponent, 
        children: [ 
         { path: '', redirectTo: 'details' }, 
         { path: 'details', component: EntityDetailsComponent } 
        ], 
       }, 
      ]     
     }, 
    ] 
}, 

Wenn Sie jetzt auf die URL navigieren /explorer Der Router sollte automatisch auf die /explorer/0-Route umleiten.

Sie müssen eine weitere Komponente für die explorer-Route erstellen. Diese Komponente sollte in ihrer Vorlage eine <router-outlet></router-outlet> enthalten, um die untergeordneten Elemente zu laden. Die Kinder sind die ids. Wenn in der Route keine ID angegeben ist, leitet der Router die Route zu 0 um.

Aber die :id Route hat eine EntitiesExplorerComponent mit einer router-outlet. Der Router möchte wissen, was er in diese Steckdose laden muss. Sie müssen also eine leere Route für die Kinder von :id definieren. In meinem obigen Beispiel wurde ich einfach auf die details umgeleitet. Wenn Sie dies nicht möchten, sollten Sie eine andere Komponente für diese '' -leere Route erstellen. Diese Komponente kann eine Schaltfläche wie: Click here to go to the details oder etwas ähnliches haben.