我们常常会遇到这样一个问题,当我们使用一个第三方控件库的时候,我们只用到了其中 1 个或某几个组件,会连带一大堆无用的东西,造成体积臃肿不堪。又或者首页用到的组件较多,首页加载速度缓慢,这个时候,我们或许需要加载用户可视范围内用到的组件,随着用户的浏览下拉,我们再去加载这些组件,渐进式加载,渐进式体验,这个时候你或许就用到了本工具所实现的功能。或者一个页面的某些不重要区域,比如第三方广告又或者不重要的元素,可以采用懒加载懒渲染,降低用户首屏等待时间。一切都在用户不知不觉中进行。大大增加用户体验,特别是中大型项目,优化必备!
nofollow" target="_blank" href="https://github.com/iwe7/iwe7-lazy-load">项目地址github
安装
使用
@ViewChild('ele') ele: ElementRef;
constructor(
public lazyLoader: LazyLoaderService,public view: ViewContainerRef
) {}
ngOnInit() {
// 开始渲染懒组件
this.lazyLoader.init(this.ele.nativeElement,this.view);
}
定义懒加载组件 demo
@NgModule({
imports: [
RouterModule.forChild([{
path: '',component: LazyTestComponent
}])
],declarations: [LazyTestComponent]
})
export class LazyTestModule extends LazyComponentModuleBase {
getComponentByName(key: string): Type
return LazyTestComponent;
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。