ネストAngular2 RC5複数のファイルをルーティングする

Question

私は複数のルーティングファイルをどのように整理して一緒にうまく動作させるのかを理解しようとしています。

私の希望ルートは次のようになります。

/ 
/forms 
/forms/:id 
/forms/named-form (named-form2, named-form3, etc.) 
/forms/named-form(2,3,etc)/admin 
/forms/named-form(2,3,etc)/admin/(several options here) 

私の目的のファイル編成：

/app.module 
/app.routes 
/app.component <--Router Outlet 

/forms/forms.module 
/forms/forms.routes 
/forms/forms.component <--Router Outlet for displaying Form Creation, Details, Settings, etc. 

/forms/named-form/named-form.module 
/forms/named-form/named-form.routes 
/forms/named-form/named-form.component <--Router Outlet for displaying Form or Admin section 

/forms/named-form/admin/admin.module 
/forms/named-form/admin/admin.routing 
/forms/named-form/admin/admin.component <--Router Outlet for various admin pages  

私は今のものを持っている方法：

/forms.routing.ts

を

const formsRoutes: Routes = [ 
    { 
    path: 'forms', 
    component: FormsComponent, 
    children: [ 
     { path: '', component: FormsListComponent }, 
     { path: ':id', component: FormsListComponent } 
    ] 
    } 
]; 

export const formsRouting = RouterModule.forChild(formsRoutes); 

/forms/named-form.routing.ts

const namedFormRoutes: Routes = [ 
    { 
    path: 'forms/named-form', 
    component: NamedFormComponent, 
    children: [ 
     { 
     path: '', 
     component: NamedFormFormComponent, 
     }, 
     { 
     path: 'confirmation', 
     component: NamedFormConfirmationComponent 
     } 
    ] 
    } 
]; 

/forms/named-form/admin.routes.ts

const namedFormAdminRoutes: Routes = [ 
    { 
    path: 'forms/named-form/admin', 
    component: NamedFormAdminComponent, 
    children: [ 
     { 
     path: '', 
     component: ManageDataComponent, 
     }, 
     { 
     path: 'manage-data', 
     component: ManageDataComponent 
     }, 
     { 
     path: 'settings', 
     component: SettingsComponent 
     }, 
     { 
     path: 'import', 
     component: ImportDataComponent 
     } 
    ] 
    } 
]; 

これは主に動作しますが、それに私が持っているいくつかの問題があります。私はネストされたルートに深く行くほど完全なパスを指定する必要はなかったと思います。例えば、管理者のパスはforms/named-form/adminですが、私はそれがすでにnamed-formの子であることを知りたいと思います。これは私が何か間違っていると思うように導くものの一つです。

私もadmin.componentに影響しますが、私はforms/named-form/adminに移動した場合named-form.componentが現在触れません、私のnamed-form.componentファイルで物事を行うことができるようにする必要があります。それはnamed-form.componentルーターアウトレットの代わりに、ルータのアウトレットapp.componentを使用して終了します。 のパスをnamed-form.routesファイルに含めることはできますが、管理者の子ルートをセットアップする方法もわからないので、すべてのメイン管理者の子コンポーネントもインポートする必要はありません。

私のモジュールを見てする必要がある場合、私はわからないんだけど、もしそうなら、私はそれらを追加します。

どのように私はこれよりよく行うことができますか？探してくれてありがとう。

Answer 1

現在のところ、（RC5）ネストされたモジュールでルートを設定する簡単な方法はありません。これは、事前RC5ルーティングのハイブリッド（エクスポートルートではなくRouterModule.forChild対象）と現在のRC5のngModule設定を使用しています

How to route to a Module as a child of a Module - Angular 2 RC 5

：私は、このスタックオーバーフローの答えで説明したソリューションを実装しました。残念なことに、親ルートのconfig内に子ルータのコンポーネントをリストし、子モジュール内のすべてのコンポーネントをエクスポートすることは、明らかに理想的ではありません。しかし、少なくとも、あなたの例のように、あなたの子ルートconfigsで完全なルートパスを使う必要はありません。また、この設定では、ルーターアウトレットを適切に入れ子にしていますが、上記のようにルートルーターアウトレットに戻すことはありません。

私の設定の一部抜粋：

// parent route config 
const routes: Routes = [ 
{ 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' 
}, 
{ 
    path: '', 
    component: BaseComponent, 
    canActivate: [AuthGuard], 
    children: [ 
     { path: 'home', component: HomeComponent },    
     { 
      path: 'admin', 
      children: [...adminRoutes]    
     }    
    ]   
}  
]; 


// child route config (for me, "/admin") 
export const adminRoutes: Routes = [ 
{ 
    path: '', 
    component: AdminComponent, 
    children: [ 
     { 
      path: '', 
      redirectTo: 'client-list', 
      pathMatch: 'full' 
     }, 
     { path: 'client-list', component: AdminClientListComponent, canActivate: [AdminClientListGuard] }, 
     { path: 'list', component: AdminListComponent }, 
     { path: 'edit/:id', component: AdminEditComponent } 
    ] 
} 
]; 

Answer 2

私が言及した How to route to a Module as a child of a Module - Angular 2 RC 5記事でこの質問に答えました。

ngModulesとRC5を使用している場合、親モジュールのルーティング設定では、子モジュールのルーティングについて何も知る必要はありません。ここでは、親モジュールのルートを定義するだけです。 さらに、子モジュールを親モジュールにインポートする必要があります。あなたのルートをこのように定義する必要があり、子モジュールで ：

export const childRoutes: Routes = [ 
    { 
    path: 'someChild', 
     component: SomeChildComponent, 
     children: [ 
     { path: '', component: SomeChildSubComponent1 }, 
     { path: 'comp1', component: SomeChildSubComponent1 }, 
     { path: 'comp2', component: SomeChildSubComponent2 } 
     ] 
    } 
]; 

これは、あなたが/ someParent/someChild/COMP1のようなURLを持つようになる - とコンポーネントは、対応するルータ・アウトレットに表示されます。 注：空のパスのコンポーネントを宣言する必要があります。それ以外の場合は、子供たちに移動することはできません。