Góc 2 định tuyến không hoạt động đúng cách

Question

Tôi không thể định tuyến để làm việc với trẻ em trong Angular 2. Ứng dụng là ứng dụng Angular 2 đầu tiên của tôi, nó rất đơn giản và có thanh điều hướng ở trên cùng ở phần dưới của trang. Bất cứ khi nào tôi nhấp vào bất kỳ liên kết điều hướng nào, tất cả điều hướng đến cùng một đứa trẻ và thậm chí tệ hơn nội dung của ngăn xếp con đó, có nghĩa là tôi nhấp một lần, con tải bên dưới, tôi nhấp lại vào lần tải xuống bên dưới, vì vậy tôi có hai lần, và cứ thế vô tận.

Nội dung đầy đủ có thể được tìm thấy ở đây: plunker

Đây là searches.routing.ts tập tin của tôi:

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

Đây là app.routing.ts tập tin của tôi:

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

Vì vậy, một lần nữa, điều này không hoạt động chính xác, nhưng nếu tôi làm tất cả các tuyến đường trong tệp chính như vậy:

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

Nhưng tôi muốn tìm hiểu cách ủy quyền các tuyến tìm kiếm cho một mô-đun con để dễ quản lý hơn.

Answer 1

Bạn nên có thành phần gốc trong vòng searchesRoutes cho trẻ em của bạn các tuyến đường như:

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

Và bạn cũng phải xác định tuyến đường mặc định như:

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

Sau đó bạn searches.routing.ts tệp sẽ là:

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

Xem chi tiết tại đây Plunker