कोणीय 2 रूटिंग ठीक से काम नहीं कर रहा है

Question

मुझे एंगुलर 2 में बच्चों के साथ काम करने के लिए रूटिंग नहीं मिल रही है। यह एप्लिकेशन मेरा पहला कोणीय 2 एप्लिकेशन है, यह बहुत आसान है और शीर्ष पर एक नेविगेशन बार है जो सामग्री को पॉप्युलेट करना चाहिए पृष्ठ के निचले हिस्से में। जब भी मैं किसी भी नेविगेशन लिंक पर क्लिक करता हूं, वे सभी एक ही बच्चे को नेविगेट करते हैं और उस बच्चे के ढेर की सामग्री को और भी बदतर करते हैं, जिसका अर्थ है कि मैं एक बार क्लिक करता हूं, बच्चा नीचे लोड होता है, मैं फिर से क्लिक करता हूं, यह फिर से लोड होता है, इसलिए मेरे पास दो बार है, और अंतहीन पर।

पूरी सामग्री यहां पाया जा सकता:

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 './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 फ़ाइल है: plunker

यह मेरा searches.routing.ts फ़ाइल है

तो फिर, यह सही तरीके से काम नहीं करता है, लेकिन अगर मैं मुख्य फ़ाइल में सभी रूट्स करता हूं तो:

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