角2路由不正常工作

Question

我似乎无法通过路由来处理角2中的子程序。这个应用程序是我的第一个角2应用程序，它非常简单，顶部有一个导航条，应该在页面的下部填充内容。每当我点击任何导航链接，它们都导航到同一个子页面，更糟糕的是，子程序堆栈的内容更糟，这意味着我单击一次，子程序加载到下面，我再次单击它在下面加载，所以我有两次，等等。

完整的内容可以在这里找到：柱塞

这是我的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
  } 
];

请参阅更多详细信息，这里是柱塞