Question

在我的应用程序中，我有一个SupportModule，它有3个子模块（AdminModule，ChatModule，ContactModule）。 SupportModule及其3个子模块有自己的路由定义。

结构看起来像

`AdminModule＆＃39;的路由如下：

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

和SupportModule（3个子模块的父模块）的路由如下：

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推荐的风格一致。

我刚刚在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出现时，我决定模块化所有东西以保持它们在一起。我有一个有很多路线的大型应用程序。我已将所有主要路径放置到app.routing中的功能模块中：

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

我使用每个功能模块执行此操作，并且我在路由方面没有任何问题，并且保持模块化。

Angular2 RC6 - 带路由的嵌套模块

2 个答案: