微客导航 » 文章资讯 » 基于angular6.0实现的一个组件懒加载功能示例

基于angular6.0实现的一个组件懒加载功能示例

2023-09-14 05:35:05 308

我们常常会遇到这样一个问题，当我们使用一个第三方控件库的时候，我们只用到了其中1个或某几个组件，会连带一大堆无用的东西，造成体积臃肿不堪。又或者首页用到的组件较多，首页加载速度缓慢，这个时候，我们或许需要加载用户可视范围内用到的组件，随着用户的浏览下拉，我们再去加载这些组件，渐进式加载,渐进式体验，这个时候你或许就用到了本工具所实现的功能。或者一个页面的某些不重要区域，比如第三方广告又或者不重要的元素，可以采用懒加载懒渲染，降低用户首屏等待时间。一切都在用户不知不觉中进行。大大增加用户体验，特别是中大型项目，优化必备！

项目地址github

安装

yarnaddiwe7-lazy-load

使用

import{Iwe7LazyLoadModule,LazyComponentsInterface}from'iwe7-lazy-load';
//用到的懒加载组件
letlazyComponentsModule:LazyComponentsInterface[]=[
{
//组件的selector
path:'lazy-test',
//组件的相对地址
loadChildren:'./lazy-test/lazy-test.module#LazyTestModule'
}
];
@NgModule({
imports:[Iwe7LazyLoadModule.forRoot(lazyComponentsModule)],
//注意加上这些
schemas:[CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
})
exportclassAppModule{}

import{LazyLoaderService}from'iwe7-lazy-load';

@ViewChild('ele')ele:ElementRef;
constructor(
publiclazyLoader:LazyLoaderService,
publicview:ViewContainerRef
){}

ngOnInit(){
//开始渲染懒组件
this.lazyLoader.init(this.ele.nativeElement,this.view);
}

定义懒加载组件demo

import{LazyComponentModuleBase}from'iwe7-lazy-load';
@Component({
selector:'lazy-test',
template:`iamalazy`
})
exportclassLazyTestComponent{}

@NgModule({
imports:[
RouterModule.forChild([{
path:'',
component:LazyTestComponent
}])
],
declarations:[LazyTestComponent]
})
exportclassLazyTestModuleextendsLazyComponentModuleBase{
getComponentByName(key:string):Type{
returnLazyTestComponent;
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

基于angular6.0实现的一个组件懒加载功能示例

热门推荐

随机推荐