浅谈angular4实际项目搭建总结(2)

routes的loadChildren属性

ng4的提供了路由懒加载，如下，我们有个一级路由/main，/main有个二级路由/home对应home组件，我们可以通过，下面的方法来定义子模块的路由和组件，但是这种写法就需要把路由写在一起，而我们希望home组件的路由是一个单独的home.routes.ts文件存在于home文件夹中，通过在类似父模块中引入子模块的方式注册home路由

{
 path: 'main',
　compontent: MainComponent,
 children: [
   {
    path: 'home',
    component: HomeComponent,
   }
  ] 
}

所以就要使用loadChildren，通过它来注册子模块和子路由，代码如下。loadChildren会找到路径文件app/home/home.module，#隔开，后面是exports的模块名。 下面的HomeModule, 定义了home的路由和组件关系，因为是二级路由，所以这里用的是RouterModule.forChild，最后通过框架的处理，就达到了上面代码里的 children 属性的效果。 ps: 原本是访问/main/home就会载入main和home组件，但是发现直接访问路径 /home 能直接载入home组件，似乎也注册了一个根域名。 原来是使用了loadChildren之后，HomeModule模块就已经被注册了到main模块下了，而我在AppModule里又通过imports注册了一次HomeModule，这样就重复注入了，而且还是一次和父模块同级的注册，这一点要小心。

{
 path: 'main',
 compontent: MainComponet,//注意这里加载的是Main
 loadChildren: 'app/home/home.module#HomeModule',
}

//HomeModule
const routes: Routes = [
  { path: '', component: HomeCompontent}
]
@NgModule({
declarations: [
　　HomeCompontent
],
imports: [
　　RouterModule.forChild(routes)
],
providers: []
})
export class HomeModule { }

总结一下上面的router相关内容 ：

假设一个场景，根模块注册两个路径，一个是/login，一个是/main。/login这个路由访问就是单纯的一个登陆页面，/main下面的路由都将是对应核心页面和业务，因为在main组件里包含了公用的侧边栏、导航栏、内容容器和底部栏，所以 /main路由加载的main组件的内容容器里需要嵌套子模块。 举个实例，当我访问/main/home的时候main组件会加载home组件到content容器中，当我访问/main/manager，manager组件又会替换content中的home。这样我们的公共页面部分就是不变的main组件，根据子路由的变化，去加载不同的组件到content里。

以下是main组件的html大致代码和实际页面截图：

这里也有一个知识点是<router-outlet>标签的嵌套，上面的代码中<div>下面有一个<router-outlet>标签，home等二级组件会被载入到父组件main的<router-outlet>标签下。而main组件的父组件是引导组件AppCompontent，所以main组件是通过一级路由被载入到AppCompontent的html模板的<router-outlet>下方，以下是AppCompontent组件部分代码：