Köşeli 2 yönlendirme düzgün çalışmıyor

Question

Angular 2'de çocuklarla çalışmak için yönlendirmeye gidiyorum. Uygulama benim ilk Angular 2 uygulamasıdır, çok basittir ve içeriğin doldurulması gereken üstte gezinme çubuğu vardır sayfanın alt kısmında. Navigasyon bağlantılarından herhangi birine tıkladığımda, hepsi aynı çocuğa gidip, o çocuk yığınlarının içeriğini daha da kötüleştiriyor, yani bir kere tıklıyorum, yani çocuk aşağıya yükler, tekrar tıklarsam aşağıya tekrar yüklerim, böylece iki kez aldım. ve böylece sonsuza dek.

tam içerik

burada bulabilirsiniz:

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

: Bu benim app.routing.ts dosya

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

geçerli: Bu benim searches.routing.ts dosya plunker

olduğunu

Yine, bu doğru çalışmıyor, ancak ana yoldaki tüm yolları şu şekilde yapıyorsam:

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

Ancak arama yollarını daha kolay yönetilebilir hale getirmek için bir alt modüle nasıl devredileceğini öğrenmek istiyorum.

Answer 1

Çocuklarınız için benzer yolları searchesRoutes içinde kök bileşeni olmalıdır:

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

Ve ayrıca gibi varsayılan rota belirlemeniz gerekir: Sonra

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

sizin searches.routing.ts dosya olacaktır:

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

Daha fazla bilgi burada bulabilirsiniz Plunker