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

本文小编为大家详细介绍“Angular中怎么懒加载模块并动态显示它的组件”，内容详细，步骤清晰，细节处理妥当，希望这篇“Angular中怎么懒加载模块并动态显示它的组件”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的。比如, 点击一个按钮后显示一行工具栏, 这个工具栏组件我不希望它默认打包进main.js, 而是用户点按钮后动态把组件加载并显示出来.那为什么要动态加载呢? 如果直接在目标页面组件引入工具栏组件, 那么工具栏组件中的代码就会被打包进目标页面组件所在的模块, 这会导致目标页面组件所在的模块生成的js体积变大; 通过动态懒加载的方式, 可以让工具栏组件只在用户点了按钮后再加载, 这样就可以达到减少首屏尺寸的目的.为了演示, 新建一个angular项目, 然后再新建一个ToolbarModule, 项目的目录结构如图为了达到演示的目的, 我在ToolbarModule的html模板中放了个将近1m的base64图片, 然后直接在AppModule中引用ToolbarModule, 然后执行ng build, 执行结果如图可以看到打包尺寸到达了1.42mb, 也就是说用户每次刷新这个页面, 不管用户有没有点击显示工具栏按钮, 工具栏组件相关的内容都会被加载出来, 这造成了资源的浪费, 所以下面将ToolbarModule从AppModule的imports声明中移除, 然后在用户点击首次点击显示时懒加载工具栏组件.首先, 新建一个ToolbarModule和ToolbarComponent, 并在ToolbarModule声明ToolbarComponent


“alt=””>
登录后复制然后再AppComponent的中按钮点击事件处理程序中写加载工具栏模块的代码:

{{isToolbarVisible?’隐藏’:’显示’}}
首屏内容关键在于其中的第32-42行, 首先通过一个动态import导入toolbar.module.ts中的模块, 免费云主机、域名然后调用createNgModuleRef并传入当前组件的Injector作为ToolbarModule的父级Injector, 这样就实例化了ToolbarModule得到了moduleRef对象, 最后就是调用html模板中声明的的ViewContainerRef对象的createComponent方法创建ToolbarComponent组件

privateasyncloadToolbarModule(){
if(this.toolbarLoaded)return;
this.toolbarLoaded=true;
const{ToolbarModule,ToolbarComponent}=awaitimport('./toolbar/toolbar.module');
constmoduleRef=createNgModuleRef(ToolbarModule,this._injector);
const{injector}=moduleRef;
constcomponentRef=this.toolbarViewRef.createComponent(ToolbarComponent,{
injector,
ngModuleRef:moduleRef,
});
}

此时再来看下这番操作后执行ng build打包的尺寸大小可以看到首屏尺寸没有开头那么离谱了, 原因是没有在AppModule和AppComponent直接导入ToolbarModule和ToolbarComponent, ToolbarModule被打进了另外的js文件中(Lazy Chunk Files), 当首次点击显示按钮时, 就会加载这个包含ToolbarModule的js文件注意看下面的gif演示中, 首次点击显示按钮, 浏览器网络调试工具中会多出一个对src_app_toolbar_toolbar_module_ts.js文件的请求读到这里，这篇“Angular中怎么懒加载模块并动态显示它的组件”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注云技术行业资讯频道。

相关推荐: 在电脑上怎么下载并安装vue

本篇内容介绍了“在电脑上怎么下载并安装vue”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 首先，我们需要在电脑上安装Node.js。这是因为Vue-cli脚手…