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に従ってください。具体的には、次の部分があります。

異なる機能を持つコンポーネントすべてについて、アプリケーションのルートフォルダに新しいフォルダを作成し、必要なコンポーネント、ルーティング、サービスをそこに配置します。 。次に、モジュールをすべてまとめて定義します。あなたの場合、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のAPI

乾杯のための事実上の参照があるようAngular2のドキュメントは、ほとんどの時間を助けることができます！