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文件几乎相同.

当我运行应用程序时，首先加载的是与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代替component. 我们传递一个字符串而不是一个符号，以避免急于加载该模块. 我们不仅定义模块的路径，还定义类的名称. 除了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.

查看与此相关的精彩教程:

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

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