Angular2 RC6-带路由的嵌套模块

在我的应用程序中，我有一个

SupportModule

，它有3个子模块（

AdminModule

，

ChatModule

，

ContactModule

）

SupportModule

及其3个子模块有自己的路由定义

结构看起来像

“AdminModule”的路由如下所示：

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 }
        ]
    };    

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

下面给出了

支持模块

（3个子模块的父模块）的路由：

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 }
        ]
    };    

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

导航工作正常，没有任何问题。但我有点困惑。我不知道这是否是让父子模块有自己的路由的正确方法，或者是否有更好的方法来实现这一点

---

如果有人能纠正我（如果我犯了错误）或知道更好的方法，那将非常有帮助。

我想这真的取决于你想要怎样。当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[] = [];

然后在每个功能模块中执行此操作，例如：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 }
]);

---

我对每个功能模块都这样做，我在布线方面没有问题，而且它保持了模块化。

从我对文档的阅读以及我自己类似布线的经验来看，您所做的似乎与Angular推荐的风格一致

我只是在角形github上遇到的。我还没有尝试过，但看起来链接提供了更好的方法

我试过之后会回来的

---

按照链接中的说明，我第一次使用惰性加载实现了这一点，因为这正是我真正想要的

我不知道你在找哪条路

使用惰性加载时，它是这样的：

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

我的等级是

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

成本计算。路线

是：

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

---

我相信您可以用同步加载代替我的延迟加载。

讨论链接似乎非常有用。我会调查的，但请在这里分享你的发现谢谢Chris。我也在偷懒后加载。你的例子很好helpful@ChrisCurnow如果我错了，请纠正我，但是如果您不在costing-routing.module中延迟加载子模块，并使用渴望加载，则很难遵循childRoutes方法，例如。。。costing.module和costing-routing.module，payments.module和payments-routing.module。如果您将Payments-Routing.module导入Payments.module，然后将Payments.module导入Costing.module，那么在不将支付路径作为子路径放置在成本计算路径中的情况下，您是否会有路径干扰？你能举一个例子来说明你是如何按照同样的模式进行快速加载的吗？您好，这可能看起来有点傻，但是我不明白为什么为每个路由文件设置了空路径？我使用空路径作为默认路径。这意味着我可以直接进入我想去的地方，然后进入我想去的地方。例如，如果我导航到“付款”模块，该模块的路由文件会将我路由到“付款”列表。因此，我不必硬编码paymentsList，只需更改路由文件中的默认值即可。我同意您提出的结构。我认为它非常灵活，并保持模块之间的隔离，这对于大型项目来说非常重要。@JohnBaird您是否曾在嵌套功能模块方面更进一步？例如管理员/用户。管理员相当于您的主模块，而不仅仅是拥有一堆组件来创建另一个名为用户的功能模块（其中将包含用户列表和用户详细信息组件集）。我相信当你懒洋洋地加载子模块时会容易得多，因为如果你不这样做的话，我不认为子模块的路由文件会像孩子一样工作。如果我错了，请纠正我。只是想看看你的想法。因为我一直在努力实现它。