Angular2路由器:如何使用自己的路由规则正确加载子模块

前端之家收集整理的这篇文章主要介绍了Angular2路由器:如何使用自己的路由规则正确加载子模块前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的Angular2应用程序结构:

这是我的代码的一部分.以下是Angular2应用程序的主要模块,它导入其路由规则和子模块(EdgeModule)并使用与某些页面相关的一些组件.

app.module.ts

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

export class AppModule {
}

以下是主模块的路由规则.它有登录页面页面找不到的路径.

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

edge.module.ts

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

export class EdgeModule {
}

以下是加载模块的路由规则,如您所见,顶部栏和侧边栏组件.

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

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

第一section.module.ts

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

export class FirstSectionModule {
}

这些是FirstSectionModule的页面(组件)的路由规则

第一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},component: AnagraficheComponent }
        ]
    }
];

export const firstSectionRouting = RouterModule.forChild(appRoutes);

对于second-section.module.ts和second-section.routing.ts文件几乎一样.

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

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

你可以尝试使用loadchildren,其中homemodule,productmoudle,baout模块有自己的路由规则.
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,children: [
            { path: '',component: HomePage },{ path: 'test/:id',component: Testinfo},{ path: 'test2/:id',component: Testinfo1},{ path: 'test3/:id',component: Testinfo2}
        ]
    }
];

这也称为延迟加载模块.

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

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

查看与此相关的这个很棒的教程.

https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

猜你在找的Angularjs相关文章