Angular中懒加载模块并动态显示它的组件

1. 懒加载模块介绍

随着应用程序的扩展，Angular应用程序越来越大，这可能会导致性能问题。为了解决这个问题，Angular提供了懒加载模块的功能。懒加载模块可以在需要时加载，从而减少初始加载时间并提高性能。

需要注意的是，懒加载模块只能在Angular版本6及以上的版本中使用。

2. 懒加载模块的使用

懒加载模块的使用非常简单。在应用程序中需要加载的模块的Routes配置中设置loadChildren属性为模块路径即可。

const routes: Routes = [
  { path: 'my-feature', loadChildren: './my-feature/my-feature.module#MyFeatureModule' }
];

在以上代码中，loadChildren配置项使用'./my-feature/my-feature.module#MyFeatureModule'，其中'./my-feature/my-feature.module'为模块路径，MyFeatureModule为该模块的名称。

2.1 模块文件

在创建懒加载模块时，需要创建一个模块文件。模块文件可以包含模块自己的路由配置信息以及组件和服务等其他功能模块。以下是一个懒加载模块的模块文件示例：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MyFeatureComponent } from './my-feature.component';
const routes = [
  { path: '', component: MyFeatureComponent }
];
@NgModule({
  declarations: [
    MyFeatureComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class MyFeatureModule { }

在以上代码中，模块文件引用了相关的Angular模块，如NgModule，CommonModule，RouterModule等。模块的路由信息存放在routes数组中，组件信息存放在declarations数组中。最后，将该模块声明为MyFeatureModule并导出。

2.2 加载懒加载模块

在应用程序中加载懒加载模块时，可以使用loadChildren属性来引入该模块。在应用程序中，可以将懒加载模块的路径存储在一个字符串变量中：

export const myFeatureModulePath = './my-feature/my-feature.module#MyFeatureModule';

在模块的路由配置中，可以引用该变量：

import { myFeatureModulePath } from './my-feature.module';
const routes: Routes = [
  { path: 'my-feature', loadChildren: myFeatureModulePath }
];

在上述代码中，loadChildren使用存储在变量中的模块路径。

3. 动态显示懒加载模块的组件

在使用懒加载模块后，我们需要在应用程序中动态显示懒加载模块的组件。我们可以使用Angular Router来完成这项任务。

通过Router服务，我们可以获取到当前加载的模块，我们可以使用该模块的ComponentFactoryResolver来动态创建组件。

import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { Router } from '@angular/router';
import { myFeatureModulePath } from './my-feature.module';
@Component({
    selector: 'app-my-component',
    template: ''
})
export class MyComponent {
    @ViewChild('myFeatureComponentContainer', { read: ViewContainerRef }) container: ViewContainerRef;
    constructor(private router: Router) { }
    async loadMyFeatureComponent() {
        const module = await import(myFeatureModulePath);
        const componentFactory = module.MyFeatureModule.componentFactoryResolver.resolveComponentFactory(MyFeatureComponent);
        this.container.createComponent(componentFactory);
    }
}

在以上代码中，我们通过Router服务获取当前懒加载模块的ComponentFactoryResolver。使用ComponentFactoryResolver的resolveComponentFactory方法来解析要创建的懒加载模块组件。最后，使用ViewContainerRef的createComponent方法来创建该组件，并将其添加到组件容器中。

4 总结

这篇文章介绍了Angular中懒加载模块的使用以及如何动态显示懒加载模块的组件。懒加载模块可以帮助我们提高应用程序的性能，并减少应用程序的初始加载时间。通过Angular Router和ComponentFactoryResolver，我们可以方便地使用懒加载模块，并且动态显示其组件。