Angular2 RC6 - ルーティング付きネストされたモジュール

Question

私のアプリケーションでは、3つのサブモジュール（AdminModule,ChatModule,ContactModule）を持つSupportModuleがあります。 SupportModuleとその3つのサブモジュールには独自のルーティングが定義されています。 SupportModuleため

import { AdminComponent } from './admin.component'; 
import { RssFeedsComponent } from './rssFeeds.component'; 
import { RssFeedDetailComponent } from './rssFeedDetail.component'; 

export const adminRoutes: Route =  
    { 
     path: 'admin', 
     component: AdminComponent, 
     children: [ 
      { path: '', component: RssFeedsComponent }, 
      { path: 'feeds', component: RssFeedsComponent }, 
      { path: 'feeddetail', component: RssFeedDetailComponent } 
     ] 
    };  

及びルーティング（3つのサブモジュールの親モジュールである）：

構造

`AdminModule」のルーティングのようなものを以下に示す見えます以下に示す：

import { SupportComponent } from './support.component'; 
import { SupportNavComponent } from './support-nav.component'; 
//Feature Modules 
import { chatRoutes } from './chat/chat.routing'; 
import { contactRoutes } from './contact/contact.routing'; 
import {adminRoutes} from './admin/admin.routing'; 

const supportRoutes: Routes = [  
    { 
     path: 'support', 
     component: SupportComponent, 
     children: [ 
      { path: '', component: SupportNavComponent }, 
      chatRoutes, 
      contactRoutes, 
      adminRoutes 
     ] 
    } 
]; 

export const supportRouting: ModuleWithProviders = RouterModule.forChild(supportRoutes);   

最後に私はこのsupportRoutingをAppModuleにインポートしています。

ナビゲーションは問題なく正常に動作しています。しかし、私は少し混乱しています。私はこれが、独自のルーティングを持つ親子モジュールを持つ正しい方法かどうか、またはこれを実現するためのより良い方法があるかどうかはわかりません。

誰かが私を訂正することができます（私が間違いをしている場合）またはより良いアプローチを知っていると、本当に役立ちます。

Answer 1

私が読んだドキュメントと、それに似たルーティングの経験から、あなたがしたことはAngularの推奨スタイルに同意しているようです。

私はちょうど角度のgithubのthis discussionに出くわしました。私はまだそれを試していないが、リンクがこれを行うためのより良い方法を提供するように見えます。

私が試してみると、ここに戻ってきます。

---

リンクの手順に従って、私は最初にこの作業を遅延ロードで行っていました。なぜなら、これは私が本当に望んでいたものだからです。

あなたが探している方法がわかりません。遅延ロードで

それはこのように書きます：、支払い、バリエーション、管理原価計算はどこ

私の階層は

|--App 
| Home 
| Costing 
| | Payments 
|  | Payments List 
|  | Payments Detail 
| | Variations 
|  | ... 
| Admin 
| |--Projects 
|  |... 
| |--Users 
|  |... 
| ... 

で、プロジェクトとユーザーは、すべてのモジュールです。

マイapp.routingは、次のようになります。

export const appRoutes: Routes =[ 
    { 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' 
    }, 

    { 
    path: 'home', 
    component: HomeComponent 
    }, 

    { path: 'costing', loadChildren: 'app/costing/costing.module#CostingModule' }, 

    { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' }, 

]; 

export const appRoutingProviders: any[] = [ 
    authProviders, 
]; 

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

costing.routingは次のとおりです。

const routes: Routes = [ 

    { 
    path: '', component: CostingComponent, 
    children: [ 

    { path: '', component: EmptyComponent, pathMatch: 'full' }, 
    { path: 'payments', loadChildren: 'app/costing/payments/payments.module#PaymentsModule' }, 
    { path: 'variations', loadChildren: 'app/costing/variations/variations.module#VaritionsModule' } 
    ] 
    } 
]; 

export const costingRouting: ModuleWithProviders = RouterModule.forChild(routes); 

そして最後に、payments.routing：

const paymentsRoutes: Routes = [ 

    { 
    path: '', 
    component: PaymentsListComponent}, 
    { 
    path: 'detail:id', 
    component: PaymentsDetailComponent 
    }, 

]; 

export const paymentsRouting: ModuleWithProviders = RouterModule.forChild(paymentsRoutes); 

私はあなたのための同期ロードを置き換えることができ確信しています私の怠惰な読み込み。

Answer 2

私は本当にそれがあなたにどのようにしたいと思うかと思います。 ngModulesが出てきたら、すべてをモジュール化して一緒に保つことにしました。私は数多くのルートを持つ大きなアプリを持っています。例えば、各機能モジュールに私はこれを行う

import { Routes } from '@angular/router'; 
import { AuthGuardService } from './services/authGuard.service'; 

export const appRoutes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', loadChildren: './app/home/home.module#HomeModule' }, 
    { path: 'documents', loadChildren: './app/documents/documents.module#DocumentsModule' }, 
    { path: 'calculator', loadChildren: './app/calculator/calculator.module#CalculatorModule'}, 
    { path: 'food', loadChildren: './app/food/food.module#FoodModule'}, //canActivate: [ AuthGuardService ] }, 
    { path: 'themes', loadChildren: './app/themes/themes.module#ThemesModule', canActivate: [ AuthGuardService ] }, 
    { path: 'settings', loadChildren: './app/settings/settings.module#SettingsModule', canActivate: [ AuthGuardService ] }, 
    { path: 'about', loadChildren: './app/about/about.module#AboutModule' } 

]; 

export const appRoutingProviders: any[] = []; 

を

：私のようなapp.routingのモジュールを搭載したすべての主要なルートを配置しているhome.routing.ts：

export const routing = RouterModule.forChild([ 
    { path: 'home', component: HomeComponent }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'verify', component: VerifyComponent }, 
    { path: 'challenge', component: ChallengeComponent }, 
    { path: 'verifyEmail/:id', component: VerifyEmailComponent }, 
    { path: 'change', component: ChangeComponent }, 
    { path: 'forgot/:id', component: ForgotComponent }, 
    { path: 'verifyPassword/:id', component: ForgotVerifyComponent }, 
    { path: 'verifyUserName/:id', component: ForgotVerifyComponent } 
]); 

I各機能モジュールでこれを行い、ルーティングに問題はなく、モジュラー化しています。