快捷導(dǎo)航

基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例

更新時(shí)間：2018年04月12日 13:50:23 作者：楊明明abc

這篇文章主要介紹了基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

我們常常會遇到這樣一個(gè)問題，當(dāng)我們使用一個(gè)第三方控件庫的時(shí)候，我們只用到了其中 1 個(gè)或某幾個(gè)組件，會連帶一大堆無用的東西，造成體積臃腫不堪。又或者首頁用到的組件較多，首頁加載速度緩慢，這個(gè)時(shí)候，我們或許需要加載用戶可視范圍內(nèi)用到的組件，隨著用戶的瀏覽下拉，我們再去加載這些組件，漸進(jìn)式加載,漸進(jìn)式體驗(yàn)，這個(gè)時(shí)候你或許就用到了本工具所實(shí)現(xiàn)的功能?；蛘咭粋€(gè)頁面的某些不重要區(qū)域，比如第三方廣告又或者不重要的元素，可以采用懶加載懶渲染，降低用戶首屏等待時(shí)間。一切都在用戶不知不覺中進(jìn)行。大大增加用戶體驗(yàn)，特別是中大型項(xiàng)目，優(yōu)化必備！

項(xiàng)目地址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 {}

<div #ele>
 <lazy-test></lazy-test>
</div>

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;
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: