Angular2 RC6 - 带路由的嵌套模块

问题描述

在我的应用程序中，我有一个 SupportModule，它有 3 个子模块(AdminModule、ChatModule、ContactModule).SupportModule 及其 3 个子模块都有自己的路由定义.

In my application I have a SupportModule which has 3 sub-Modules (AdminModule,ChatModule,ContactModule). SupportModule and its 3 sub-Modules have their own routings define.

结构看起来像

AdminModule"的路由如下:

The routing for the `AdminModule' is given below:

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个子模块的父模块)的路由如下:

and routing for SupportModule (which is parent module of the 3 sub modules) is given below:

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 中.

Then finally I am importing this supportRouting into my AppModule.

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

Navigation is working fine without any issue. But I am a little confused. I don't know whether this is the right way to have parent-child modules with their own routing or if there is some better way to achieve this.

如果有人可以纠正我(如果我犯了错误)或知道更好的方法，那将非常有帮助.

If someone can correct me (if I am making a mistake) or knows a better approach then that would be really helpful.

推荐答案

从我对文档的阅读以及我自己在类似路由​​方面的经验来看，您所做的似乎与 Angular 推荐的风格一致.

From my reading of the docs, and my own experience with similar routing, what you have done seems to agree with Angular's recommended style.

我刚刚在 Angular github 上遇到了这个讨论.我还没有尝试过，但看起来链接提供了一种更好的方法.

I just came across this discussion on the Angular github. I haven't tried it yet but it looks like the link provides a better way of doing this.

我试过之后再来这里.

按照链接中的说明，我首先使用延迟加载进行了这项工作 - 因为无论如何这就是我真正想要的.

Following the instructions in the link I first got this working WITH lazy loading – because that's what I really wanted anyway.

我不确定您在寻找哪种方式.

I'm not sure which way you are looking for.

延迟加载是这样的:

我的层次结构是

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

成本核算、付款、变更、管理、项目和用户都是模块.

Where Costing, Payments, Variations, Admin, Projects and Users are all modules.

我的 app.routing 然后看起来像这样:

My app.routing then looks like this:

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

我相信你可以用同步加载代替我的延迟加载.

I'm sure you could substitute synchronous loading for my lazy loading.

这篇关于Angular2 RC6 - 带路由的嵌套模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！