Angular2 路由器:如何使用自己的路由规则正确加载子模块 [英] Angular2 router: how to correctly load children modules with their own routing rules

问题描述

这是我的 Angular2 应用程序结构:

here is my Angular2 app structure:

这是我的代码的一部分.下面是Angular2应用的主要module，它导入了它的路由规则和一个子模块(EdgeModule)，并使用了一些页面相关的组件.

Here is part of my code. The following is the main module of the Angular2 app, that imports its routing rules and a child module (EdgeModule) and uses some components related to some pages.

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent,
        LoginComponent
    ],
    imports: [
        ...
        appRouting,
        EdgeModule
    ],
    providers: [
        appRoutingProviders,
        LoginService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

这里是主模块的路由规则.它有登录页面和未找到页面的路径.

Here is the routing rules for the main module. It have paths to login page and page not found.

app.routing.ts

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '**', component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [];

export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true });

这是EdgeModule，它声明了它使用的组件并导入了自己的路由规则和2个子模块(FirstSectionModule 和SecondSectionModule).

Here is EdgeModule that declares the component that it uses and import its own routing rules and 2 child modules (FirstSectionModule and SecondSectionModule).

edge.module.ts

@NgModule({
    declarations: [
        EdgeComponent,
        SidebarComponent,
        TopbarComponent
    ],
    imports: [
        ...
        edgeRouting,
        FirstSectionModule,
        SecondSectionModule
    ],
    providers: [
        AuthGuard
    ]
})

export class EdgeModule {
}

这是加载模块的路由规则，如您所见，顶栏和侧边栏组件.

Here is the routing rules for the module that loads, as you can see, topbar and sidebar components.

edge.routing.ts

Paths['edgePaths'] = {
    firstSection: 'firstSection',
    secondSection: 'secondSection'
};

const appRoutes: Routes = [
    { path: '', component: EdgeComponent,
        canActivate: [AuthGuard],
        children: [
            { path: Paths.edgePaths.firstSection, loadChildren: '../somepath/first-section.module#FirstModule' },
            { path: Paths.edgePaths.secondSection, loadChildren: '../someotherpath/second-section.module#SecondModule' },
            { path: '', redirectTo: edgePaths.dashboard, pathMatch: 'full' }
        ]
    }
];

export const edgeRouting = RouterModule.forChild(appRoutes);

最后，这是两个子模块之一，它有它的组件并导入它的路由规则.

Finally, this is one of the two child module, that have its components and imports its routing rules.

first-section.module.ts

@NgModule({
    declarations: [
        FirstSectionComponent,
        SomeComponent
    ],
    imports: [
        ...
        firstSectionRouting
    ],
    providers: [
        AuthGuard,
    ]
})

export class FirstSectionModule {
}

这些是FirstSectionModule

first-section.routing.ts

Paths['firstSectionPaths'] = {
    someSubPage: 'some-sub-page',
    someOtherSubPage: 'some-other-sub-page'
};

const appRoutes: Routes = [
    {
        path: '',
        children: [
            { path: Paths.firstSectionPaths.someSubPage, component: someSubPageComponent},
            { path: Paths.firstSectionPaths.someOtherSubPage, component: someOtherSubPageComponent},
            { path: '', component: AnagraficheComponent }
        ]
    }
];

export const firstSectionRouting = RouterModule.forChild(appRoutes);

对于 second-section.module.ts 和 second-section.routing.ts 文件，情况几乎相同.

Almost the same happens for second-section.module.ts and second-section.routing.ts files.

当我运行应用程序时，首先加载的是与 FirstSectionComponent 相关的页面，没有侧边栏和顶部栏.

When i run the app the first things that load is the page related to FirstSectionComponent, with no sidebar nor topbar.

你能告诉我我的代码有什么问题吗?控制台中没有错误.

Can you tell me what's wrong with my code? There are not errors in the console.

推荐答案

您可以尝试使用 loadChildren 其中 homeModule、productModule、aboutModule 有自己的路由规则.

You can try this using loadChildren where the homeModule, productModule, aboutModule have their own route rules.

const routes: Routes = [
    { path: 'home', loadChildren: 'app/areas/home/home.module#homeModule' },
    { path: 'product', loadChildren: 'app/areas/product/product.module#ProductModule' },
    { path: 'drawing', loadChildren: 'app/areas/about/about.module#AboutModule' }
];

export const appRouting = RouterModule.forRoot(routes);

并且回家路线规则将像

export const RouteConfig: Routes = [
    {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        children: [
            { path: '', component: HomePage },
            { path: 'test/:id', component: Testinfo},
            { path: 'test2/:id', component: Testinfo1},
            { path: 'test3/:id', component: Testinfo2}
        ]
    }
];

这也称为延迟加载模块.

this is also known as lazy loading the modules.

{ path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }

这里有一些重要的事情需要注意:我们使用属性 loadChildren 而不是组件.我们传递一个字符串而不是一个符号以避免急切地加载模块.我们不仅定义了模块的路径，还定义了类的名称.LazyModule 除了有自己的路由和一个名为 LazyComponent 的组件外，没有什么特别之处.

There's a few important things to notice here: We use the property loadChildren instead of component. We pass a string instead of a symbol to avoid loading the module eagerly. We define not only the path to the module but the name of the class as well. There's nothing special about LazyModule other than it has its own routing and a component called LazyComponent.

查看与此相关的精彩教程:https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

Check out this awesome tutorial related to this: https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

这篇关于Angular2 路由器:如何使用自己的路由规则正确加载子模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！