通过路由器惰性加载模块

应用路由

app/app-routing.module.ts

COPY CODE

import { NgModule }             from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [

  { path: '', redirectTo: 'contact', pathMatch: 'full'},

  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },

  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule {}

其中，contact路由并不是在这里定义的。对于带有路由组件的特性模块，其标准做法就是让它们定义自己的路由。如，ContactModule特性模块，在其特性区中定义自己的路由文件contact.routing.ts。 

另外两个路由使用懒加载语法来告诉路由器要到哪里去找这些模块。

{ path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },

{ path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }

懒加载模块的位置是字符串而不是类型。在本应用中该字符串同时标记出了模块文件和模块类，两者用#分隔开。 

对于这些模块（CrisisModule和HeroModule模块），并不需要在根模块AppModule中导入。它们将在用户导航到其中的某个路由时，被异步获取并加载。在AppModule根模块中需要导入ContactModule模块，以便在应用启动时加载它的路由和组件。

RouterModule.forRoot

RouterModule类的forRoot静态方法和提供的配置，被添加到imports数组中，提供该模块的路由信息。

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule {}

该方法返回的AppRoutingModule类是一个路由模块，它同时包含了RouterModule指令和用来生成配置好的Router的依赖注入提供商。 这个AppRoutingModule仅用于应用的根模块。 

明天计划的事情：

       继续学习angular

问题：

       迷

收获：

      如上