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