Angular学习笔记75：惰性加载路由

在项目中，部分页面或者某一个菜单下的模块不经常被访问，所以可以将其设置为在用户访问这个页面或者点击此菜单的时候，再进行加载。

在 PagesModule 中有一个名为 lazyLoad 的模块，模块中有一个组件为 lazyLoadCom 的组件，现在将这个 lazyLoad 的模块及 lazyLoadCom 改成惰性加载。

创建 lazyLoad 模块

执行命令

ng g m lazyLoad --routing

这里加的 --routing是为使用 Angular/cli 创建模块时，将此模块的路由也一并创建了。

➜  pages git:(master) ✗ ng g m lazyLoad --routing
CREATE src/app/pages/lazy-load/lazy-load-routing.module.ts (251 bytes)
CREATE src/app/pages/lazy-load/lazy-load.module.ts (288 bytes)

在 lazyLoad 模块中创建组件 lazyLoadCom

执行命令

ng g c lazyLoadCom

执行结果

➜  lazy-load git:(master) ✗ ng g c lazyLoadCom
CREATE src/app/pages/lazy-load/lazy-load-com/lazy-load-com.component.less (0 bytes)
CREATE src/app/pages/lazy-load/lazy-load-com/lazy-load-com.component.html (32 bytes)
CREATE src/app/pages/lazy-load/lazy-load-com/lazy-load-com.component.spec.ts (665 bytes)
CREATE src/app/pages/lazy-load/lazy-load-com/lazy-load-com.component.ts (296 bytes)
UPDATE src/app/pages/lazy-load/lazy-load.module.ts (388 bytes)

将 lazyLoadCom 添加到 lazyLoad 模块的路由中

修改文件 lazy-load-routing.module.ts：

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {LazyLoadComComponent} from './lazy-load-com/lazy-load-com.component';

const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'lazyLoadCom'},
  {path: 'lazyLoadCom', component: LazyLoadComComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LazyLoadRoutingModule {
}

这里 pathMatch: 'full', redirectTo: 'lazyLoadCom'是在路由转到 ‘’ 时，重定向到路由’lazyLoadCom’.

将 LazyLoadModule 添加到 PagesRoutingModule 的路由中

修改文件 pages-routing.module.ts

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {ParentComComponent} from './parent-com/parent-com.component';
import {FormsValidatorComponent} from './forms-validator/forms-validator.component';
import {AsyncDemoComponent} from './async-demo/async-demo.component';
import {EditTableComponent} from './edit-table/edit-table.component';
import {ModifyValidatorComponent} from './modify-validator/modify-validator.component';
import {ReactiveFormValidatorComponent} from './reactive-form-validator/reactive-form-validator.component';
import {FormNestedComponent} from './form-nested/form-nested.component';
import {UserInfoComponent} from './user-info/user-info.component';
import {ComplexAnimationsComponent} from './complex-animations/complex-animations.component';
import {AnimationDemoComponent} from './animation-demo/animation-demo.component';
import {LifecycleHooksComponent} from './lifecycle-hooks/lifecycle-hooks.component';
import {StyleDemoComponent} from './style-demo/style-demo.component';
import {OperatingDOMComponent} from './operating-dom/operating-dom.component';
import {DynamicComComponent} from './dynamic-com/dynamic-com.component';

const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'parentCom'},
  {path: 'parentCom', component: ParentComComponent},
  {path: 'formsValidator', component: FormsValidatorComponent},
  {path: 'asyncDemo', component: AsyncDemoComponent},
  {path: 'editTable', component: EditTableComponent},
  {path: 'modifyValidator', component: ModifyValidatorComponent},
  {path: 'reactiveFormValidator', component: ReactiveFormValidatorComponent},
  {path: 'formNested', component: FormNestedComponent},
  {path: 'userInfo', component: UserInfoComponent},
  {path: 'complexAnimations', component: ComplexAnimationsComponent},
  {path: 'animationDemo', component: AnimationDemoComponent},
  {path: 'lifecycleHooks', component: LifecycleHooksComponent},
  {path: 'styleDemo', component: StyleDemoComponent},
  {path: 'operatingDOM', component: OperatingDOMComponent},
  {path: 'dynamicCom', component: DynamicComComponent},
  {path: 'lazyLoad', loadChildren: './lazy-load/lazy-load.module#LazyLoadModule'}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PagesRoutingModule {
}

需要注意的是：在pages-routing.module.ts 中，不能使用import {LazyLoadModule} from './lazy-load/lazy-load.module';，将这个模块加到 import 数组中，否则和正常加载就没有区别了。

将 lazyLoad 菜单显示出来

修改 DemoSiderComponent 组件的类文件：

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-demo-sider',
  templateUrl: './demo-sider.component.html',
  styleUrls: ['./demo-sider.component.less']
})
export class DemoSiderComponent implements OnInit {

  comInfo = [
    {title: '父子组件传值', routLink: 'parentCom'},
    {title: '简单的动画', routLink: 'animationDemo'},
    {title: '复杂动画序列', routLink: 'complexAnimations'},
    {title: '可编辑的table的Demo', routLink: 'editTable'},
    {title: '模板驱动式表单验证', routLink: 'formsValidator'},
    {title: '响应式表单异步校验器', routLink: 'asyncDemo'},
    {title: '动态修改响应式表单的校验器', routLink: 'modifyValidator'},
    {title: '响应式表单的验证', routLink: 'reactiveFormValidator'},
    {title: '响应式表单', routLink: 'userInfo'},
    {title: '生命周期钩子', routLink: 'lifecycleHooks'},
    {title: '组件样式demo', routLink: 'styleDemo'},
    {title: '操作DOM', routLink: 'operatingDOM'},
    {title: '动态创建组件', routLink: 'dynamicCom'},
    {title: '惰性加载路由', routLink: 'lazyLoad'},
  ];

  constructor() {
  }

  ngOnInit() {
  }

}

保存刷新页面，并点击菜单’惰性加载路由’;

打开控制台发现 点击菜单’惰性加载路由’的时候，才会加载 lazy-load-lazy-load-module.js 这个文件