Angular 2 Routing funktioniert nicht richtig

Question

Ich kann nicht scheinen, Routing zu bekommen, um mit Kindern in Angular 2 zu arbeiten. Die Anwendung ist meine erste Angular 2-Anwendung, es ist sehr einfach und hat eine Navigationsleiste an der Spitze, die Inhalte füllen sollte im unteren Teil der Seite. Immer wenn ich auf einen der Navigationslinks klicke, navigieren alle zum selben Kind und noch schlimmer stapelt sich der Inhalt dieses Kindes, dh ich klicke einmal, das Kind lädt darunter, ich klicke erneut darauf es lädt wieder unten, also habe ich es zweimal, und so weiter endlos. plunker

Das ist mein searches.routing.ts Datei:

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { AdvancedSearchComponent } from './advanced-search/advanced-search.component'; 
import { GuidedSearchComponent } from './guided-search/guided-search.component'; 
import { QuickSearchComponent } from './quick-search/quick-search.component'; 

const searchesRoutes: Routes = [ 
    { 
     children: [ 
      { path: 'advanced-search', component: AdvancedSearchComponent }, 
      { path: 'guided-search', component: GuidedSearchComponent }, 
      { path: 'quick-search', component: QuickSearchComponent } 
     ], 
     path: '', 
     component: GuidedSearchComponent 
    } 
]; 

export const searchesRouting: ModuleWithProviders = RouterModule.forChild(searchesRoutes); 

Das ist mein app.routing.ts Datei:

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

const searchesRoutes: Routes = [ 
    { path: 'searches', loadChildren: 'app/searches/searches.module#SearchesModule' }, 
    { path: '', redirectTo: "/searches", pathMatch: 'full' } 
]; 

const appRoutes: Routes = [ 
    ...searchesRoutes 
]; 

export const appRoutingProviders: any[] = [ 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

Der vollständige Inhalt finden Sie hier

Also wieder, das funktioniert nicht richtig, aber wenn ich alle Routen in der Hauptdatei so mache:

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { AdvancedSearchComponent } from './searches/advanced-search/advanced-search.component'; 
import { GuidedSearchComponent } from './searches/guided-search/guided-search.component'; 
import { QuickSearchComponent } from './searches/quick-search/quick-search.component'; 

const appRoutes: Routes = [ 
    { path: 'searches/advanced-search', component: AdvancedSearchComponent }, 
    { path: 'searches/guided-search', component: GuidedSearchComponent }, 
    { path: 'searches/quick-search', component: QuickSearchComponent }, 
    { path: '', redirectTo: "/searches/guided-search", pathMatch: 'full' } 
]; 

export const appRoutingProviders: any[] = [ 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

Aber ich möchte lernen, wie die Suchrouten an ein Submodul delegiert werden, um es überschaubarer zu machen.

Answer 1

Sie sollten Wurzelkomponente innerhalb searchesRoutes für Ihre Kinder Routen wie haben:

@Component({ 
    selector: 'art-search', 
    template: `<router-outlet></router-outlet>` 
}) 
export class SearchComponent {} 

Und Sie müssen auch wie Standardroute angeben:

{ path: '', redirectTo: '/guided-search', pathMatch: 'full' } 

Dann wird Ihr searches.routing.ts Datei wird sein:

const searchesRoutes: Routes = [ 
    { 
    children: [ 
     { path: 'advanced-search', component: AdvancedSearchComponent }, 
     { path: 'guided-search', component: GuidedSearchComponent }, 
     { path: 'quick-search', component: QuickSearchComponent }, 
     { path: '', redirectTo: '/guided-search', pathMatch: 'full' } 
    ], 
    path: '', component: SearchComponent 
    } 
]; 

Weitere Details finden Sie hier Plunker