Угловая 2 маршрутизация не работает должным образом

Question

Я не могу получить маршрутизацию для работы с детьми в Angular 2. Приложение - мое первое приложение Angular 2, оно очень простое и имеет верхнюю панель навигации, которая должна заполнять контент в нижней части страницы. Всякий раз, когда я нажимаю на любую из ссылок навигации, все они переходят к одному и тому же ребенку и даже хуже относятся к содержимому этих дочерних стеков, то есть я нажимаю один раз, потом ребенок загружается ниже, я нажимаю снова, он снова загружается ниже, так что у меня его дважды, и так далее бесконечно.

Полное содержание можно найти здесь: plunker

Это мой searches.routing.ts файл:

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); 

Это мой app.routing.ts файл:

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); 

Итак, это не работает правильно, но если я сделаю все маршруты в основном файле, например:

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); 

Но я хочу узнать, как делегировать поисковые маршруты в подмодуль, чтобы сделать его более управляемым.

Answer 1

Вы должны иметь корневой компонент внутри searchesRoutes для ваших детей маршрутов, таких как:

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

И вы также должны указать маршрут по умолчанию, как:

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

Тогда ваши searches.routing.ts файл будет:

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

См. Подробности здесь Plunker