在angular2中组织路由的最佳方式

Question

我对angular2中的路由有疑问。今天，我正在使用与angular2官方教程相同的示例。 的代码是这样的（file link）：

// app.routing.ts 
import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { DashboardComponent } from './dashboard.component'; 
import { HeroesComponent }  from './heroes.component'; 
import { HeroDetailComponent } from './hero-detail.component'; 

const appRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo: '/dashboard', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'dashboard', 
    component: DashboardComponent 
    }, 
    { 
    path: 'detail/:id', 
    component: HeroDetailComponent 
    }, 
    { 
    path: 'heroes', 
    component: HeroesComponent 
    } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

我的问题是。如果我有多个垃圾，我会得到一堆组件（如实体/列表，实体/添加，实体/编辑，实体/显示）

那么，该如何解决？组织我的路线而不创建凌乱组件的最佳方式是什么？

Answer 1

沿着Routing & Navigation Guide沿着。更具体地说，这些部分：

创建功能模块（里程碑＃2）：对于每一个处理的责任不同组件，在应用中创建的根文件夹的新文件夹，并把必要的组件，路由和服务在那里。然后，定义一个模块将它们放在一起。在你的情况下，创建一个名为entity的新功能模块，并将必要的组件放在该模块中。一个特征模块的一个例子（从Angular2文档截取）：

import { NgModule }  from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { HeroListComponent } from './hero-list.component'; 
import { HeroDetailComponent } from './hero-detail.component'; 

import { HeroService } from './hero.service'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule 
    ], 
    declarations: [ 
    HeroListComponent, 
    HeroDetailComponent 
    ], 
    providers: [ 
    HeroService 
    ] 
}) 
export class HeroesModule {} 

使子路由（里程碑＃2）：定义为它定义为当前要素模块必要的路由的每个特征模块路由文件。再次，从Angular2文档：

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { HeroListComponent } from './hero-list.component'; 
import { HeroDetailComponent } from './hero-detail.component'; 

const heroesRoutes: Routes = [ 
    { path: 'heroes', component: HeroListComponent }, 
    { path: 'hero/:id', component: HeroDetailComponent } 
]; 

export const heroesRouting: ModuleWithProviders = RouterModule.forChild(heroesRoutes); 

的Angular2文档可以帮助大部分的时间，因为它是不断变化的Angular2 API

干杯事实上的参考！