AngularX 路由最佳实践

前端组件化之后，就牵扯到组件的路由问题，那我们希望一个比较完美的实现是这样的：主模块管理到各个子模块的路由信息，子模块管理自己的路由信息，子模块在被访问到的时候再加载。

下面看一下angularx是怎么实现这个思路的。

首先在主模块定义到子模块的路由信息，设置子模块的懒加载用loadChildren配置。如下：

@NgModule({    imports: [        RouterModule.forRoot([            {path: '', component: HomePageComponent},            {path: 'forms', loadChildren: "app/forms/forms.module#FormsModule"}        ])    ],    exports: [RouterModule]})export class AppRoutingModule {}

子模块管理子模块的路由信息：

@NgModule({    imports: [        RouterModule.forChild([            {path:'',component: FormsComponent},            children:[                {path:'checkbox',component: CheckBoxComponent},                {path:'input',component: InputComponent}            ]        ])    ],    exports: [        RouterModule    ]})export class FormsRoutingModule {}

这样当访问项目首页的时候，访问到的是HomePageComponent。此时forms模块不会加载，当访问到/forms时，forms模块加载，forms模块的根路径展示到的是FormsComponent，在这里还可以配置forms模块的子路由。

参考：
Angular 4.x 路由快速入门
Angular 4.x LocationStrategy
Angular 4.x Router Link Directives