我们常常会遇到这样一个问题，当我们使用一个第三方控件库的时候，我们只用到了其中 1 个或某几个组件，会连带一大堆无用的东西，造成体积臃肿不堪。又或者首页用到的组件较多，首页加载速度缓慢，这个时候，我们或许需要加载用户可视范围内用到的组件，随着用户的浏览下拉，我们再去加载这些组件，渐进式加载,渐进式体验，这个时候你或许就用到了本工具所实现的功能。或者一个页面的某些不重要区域，比如第三方广告又或者不重要的元素，可以采用懒加载懒渲染，降低用户首屏等待时间。一切都在用户不知不觉中进行。大大增加用户体验，特别是中大型项目，优化必备！
项目地址github
安装
yarn add iwe7-lazy-load
使用
import { iwe7lazyloadmodule, lazycomponentsinterface } from 'iwe7-lazy-load'; // 用到的懒加载组件 let lazycomponentsmodule: lazycomponentsinterface[] = [ { // 组件的selector path: 'lazy-test', // 组件的相对地址 loadchildren: './lazy-test/lazy-test.module#lazytestmodule' } ]; @ngmodule({ imports: [iwe7lazyloadmodule.forroot(lazycomponentsmodule)], // 注意加上这些 schemas: [custom_elements_schema, no_errors_schema] }) export class appmodule {}
<p #ele> <lazy-test></lazy-test> </p>
import { lazyloaderservice } from 'iwe7-lazy-load'; @viewchild('ele') ele: elementref; constructor( public lazyloader: lazyloaderservice, public view: viewcontainerref ) {} ngoninit() { // 开始渲染懒组件 this.lazyloader.init(this.ele.nativeelement, this.view); }
定义懒加载组件 demo
import { lazycomponentmodulebase } from 'iwe7-lazy-load'; @component({ selector: 'lazy-test', template: ` i am a lazy` }) export class lazytestcomponent {} @ngmodule({ imports: [ routermodule.forchild([{ path: '', component: lazytestcomponent }]) ], declarations: [lazytestcomponent] }) export class lazytestmodule extends lazycomponentmodulebase { getcomponentbyname(key: string): type<any> { return lazytestcomponent; } }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery编码转化base64通过ajax上传
vue组件写法规范
以上就是angular6.0实现组件懒加载功能（附代码）的详细内容。