基于angular6.0實現的一個組件懶加載功能示例

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

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