Angular2 RC6-带有路由的嵌套模块 [英] Angular2 RC6 - Nested modules with routing

问题描述

在我的应用程序中，我有一个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.

尝试过后，我会回到这里.

I'll get back here when I have tried it out.

首先按照链接中的说明进行延迟加载，因为这还是我真正想要的.

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.

在延迟加载的情况下，它是这样的:

With lazy loading it goes like this:

我的层次结构是

|--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-带有路由的嵌套模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！