我似乎无法使用Angular 2中的子项进行路由 . 该应用程序是我的第一个Angular 2应用程序,它非常简单,顶部有一个导航栏,可以填充页面下半部分的内容 . 每当我点击任何导航链接时,他们都导航到同一个孩子,甚至更糟糕的是那个孩子的内容堆叠,这意味着我点击一次,孩子加载到下面,我再次点击它再次加载下面,所以我有两次,等等 .
完整内容可在此处找到:plunker
这是我的searching.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);
但我想学习如何将搜索路径委托给子模块以使其更易于管理 .
1 回答
您应该在
searchesRoutes
中为您的子路径设置根组件,例如:而且你还必须指定默认路由,如:
然后你的 searches.routing.ts 文件将是:
在这里查看更多详情Plunker