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

我的问题是。如果我有多个crud，我会得到一堆组件（例如entity/list，entity/add，entity/edit，entity/show）

那么，如何解决这个问题呢？在不创建混乱组件的情况下组织我的路线的最佳方式是什么？

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

干杯！

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

What's the best way to organize Routes in angular2

angular2-directives

angular2-template

angular2-routing

angular