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

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

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

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中组织路线的最佳方式

1 个答案: