Schachteln von Angular2 RC5-Routen Mehrere Dateien

Question

Ich versuche zu verstehen, wie ich mehrere Routing-Dateien organisieren und sie alle schön zusammen spielen soll.

Meine gewünschten Routen wie folgt aussehen:

/ 
/forms 
/forms/:id 
/forms/named-form (named-form2, named-form3, etc.) 
/forms/named-form(2,3,etc)/admin 
/forms/named-form(2,3,etc)/admin/(several options here) 

Meine gewünschte Dateiorganisation:

/app.module 
/app.routes 
/app.component <--Router Outlet 

/forms/forms.module 
/forms/forms.routes 
/forms/forms.component <--Router Outlet for displaying Form Creation, Details, Settings, etc. 

/forms/named-form/named-form.module 
/forms/named-form/named-form.routes 
/forms/named-form/named-form.component <--Router Outlet for displaying Form or Admin section 

/forms/named-form/admin/admin.module 
/forms/named-form/admin/admin.routing 
/forms/named-form/admin/admin.component <--Router Outlet for various admin pages  

So wie ich die Dinge jetzt haben:

/forms.routing.ts

const formsRoutes: Routes = [ 
    { 
    path: 'forms', 
    component: FormsComponent, 
    children: [ 
     { path: '', component: FormsListComponent }, 
     { path: ':id', component: FormsListComponent } 
    ] 
    } 
]; 

export const formsRouting = RouterModule.forChild(formsRoutes); 

/forms/named-form.routing.ts

const namedFormRoutes: Routes = [ 
    { 
    path: 'forms/named-form', 
    component: NamedFormComponent, 
    children: [ 
     { 
     path: '', 
     component: NamedFormFormComponent, 
     }, 
     { 
     path: 'confirmation', 
     component: NamedFormConfirmationComponent 
     } 
    ] 
    } 
]; 

/forms/named-form/admin.routes.ts

const namedFormAdminRoutes: Routes = [ 
    { 
    path: 'forms/named-form/admin', 
    component: NamedFormAdminComponent, 
    children: [ 
     { 
     path: '', 
     component: ManageDataComponent, 
     }, 
     { 
     path: 'manage-data', 
     component: ManageDataComponent 
     }, 
     { 
     path: 'settings', 
     component: SettingsComponent 
     }, 
     { 
     path: 'import', 
     component: ImportDataComponent 
     } 
    ] 
    } 
]; 

Diese meist funktioniert, aber es gibt ein paar Probleme, die ich mit ihm haben . Ich wünschte, ich müsste nicht die vollständigen Pfade angeben, je tiefer ich in die verschachtelten Routen gehe. Zum Beispiel ist der Admin-Pfad forms/named-form/admin, aber ich möchte es bereits wissen, es ist ein Kind von named-form. Das ist einer der Gründe, warum ich denke, dass ich etwas falsch mache.

Ich muss auch in der Lage sein, die Dinge in meiner named-form.component Datei zu tun, dass die admin.component bewirken wird, aber die named-form.component derzeit nicht berührt, wenn ich zu forms/named-form/admin navigieren. Es endet mit der primären Router-Steckdose anstelle der named-form.component Router-Steckdose. Ich kann einen Pfad für admin innerhalb der named-form.routes Datei enthalten, aber dann weiß ich nicht, wie die Admin-Child-Routen eingerichtet werden, ohne auch alle Haupt-Admin-Kind-Komponenten zu importieren, was es weniger modular macht.

Ich bin meine Module, wenn zu sehen ist notwendig, nicht sicher, aber wenn ja, werde ich sie in hinzufügen.

Wie kann ich das besser? Danke fürs schauen.

Answer 1

Von dem, was ich gesehen habe, gibt es derzeit (RC5) keine einfache Möglichkeit, Routen mit verschachtelten Modulen einzurichten. Ich habe eine Lösung in dieser Stack-Überlauf Antwort beschrieben umgesetzt:

How to route to a Module as a child of a Module - Angular 2 RC 5

Es einen Hybrid aus dem Pre-RC5-Routing verwendet (Export der Routen Objekt statt RouterModule.forChild) und den aktuellen RC5 ngModule Setup. Leider zwingt es Sie, die Kind-Router-Komponente in Ihrer Eltern-Route-Konfiguration aufzulisten und ALLE Komponenten innerhalb des Kind-Moduls zu exportieren, was offensichtlich nicht ideal ist. Aber zumindest müssen Sie nicht den vollständigen Routenpfad in Ihren untergeordneten Routenkonfigurationen verwenden, wie in Ihrem Beispiel. Auch dieses Setup verschachtelt die Router-Steckdosen richtig und kehrt nicht zum Wurzel-Router-Ausgang zurück, wie Sie oben erwähnt haben.

Einige Auszüge meiner Konfiguration:

// parent route config 
const routes: Routes = [ 
{ 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' 
}, 
{ 
    path: '', 
    component: BaseComponent, 
    canActivate: [AuthGuard], 
    children: [ 
     { path: 'home', component: HomeComponent },    
     { 
      path: 'admin', 
      children: [...adminRoutes]    
     }    
    ]   
}  
]; 


// child route config (for me, "/admin") 
export const adminRoutes: Routes = [ 
{ 
    path: '', 
    component: AdminComponent, 
    children: [ 
     { 
      path: '', 
      redirectTo: 'client-list', 
      pathMatch: 'full' 
     }, 
     { path: 'client-list', component: AdminClientListComponent, canActivate: [AdminClientListGuard] }, 
     { path: 'list', component: AdminListComponent }, 
     { path: 'edit/:id', component: AdminEditComponent } 
    ] 
} 
]; 

Answer 2

antwortete ich diese Frage an den genannten How to route to a Module as a child of a Module - Angular 2 RC 5 Artikeln.Hier ist eine Kopie meiner Antwort:

Wenn Sie ngModules und RC5 verwenden, muss die Routing-Konfiguration Ihres übergeordneten Moduls nichts über das Routing der untergeordneten Module wissen. Sie müssen hier nur die Routen für Ihr Elternmodul definieren. Außerdem müssen Sie das untergeordnete Modul in Ihr übergeordnetes Modul importieren. Im Kind Modul Sie Ihre Routen auf diese Weise definieren:

export const childRoutes: Routes = [ 
    { 
    path: 'someChild', 
     component: SomeChildComponent, 
     children: [ 
     { path: '', component: SomeChildSubComponent1 }, 
     { path: 'comp1', component: SomeChildSubComponent1 }, 
     { path: 'comp2', component: SomeChildSubComponent2 } 
     ] 
    } 
]; 

Auf diese Weise können Sie eine URL wie/someParent/someChild/comp1 - und die Komponenten werden in ihren entsprechenden Router-Ausgang angezeigt. Bitte beachten Sie: Sie müssen eine Komponente für den leeren Pfad dekomprimieren. Andernfalls können Sie nicht zu Ihren Kindern navigieren.