这是我的做法:https ://stackblitz.com/edit/angular-lazy-service-module?file=src%2Fapp%2Fapp.component.ts
这是一个概念证明。您需要注意您使用的注入器(以防延迟服务需要一些依赖项)以及如何管理延迟加载服务的生命周期(创建多少实例等)。
我的用例是在应用程序的多个区域中使用了一个相当大的服务(导出到 excel,超过 400 KB gzip),但我不想在实际需要之前加载/解析它 - 更快的初始加载!(我实际上还使用了延迟预加载策略,在几秒钟后加载模块)。
基本思想是您将其定义为路由中的惰性模块(您实际上并未使用),但您手动触发加载。您还可以使用注入令牌从该模块解析服务(一旦拥有它)。
懒惰模块
import { NgModule } from '@angular/core';
import { LazyService } from './lazy-service.service';
import { LAZY_SERVICE_TOKEN } from './lazy-service.contract';
@NgModule({
providers: [{ provide: LAZY_SERVICE_TOKEN, useClass: LazyService }],
})
export class LazyServiceModule {
}
懒惰的服务
import { Injectable } from '@angular/core';
import { LazyService as LazyServiceInterface } from './lazy-service.contract';
@Injectable()
export class LazyService implements LazyServiceInterface {
process(msg: string) {
return `This message is from the lazy service: ${msg}`;
}
}
应用模块
@NgModule({
imports: [BrowserModule,
RouterModule.forRoot([
// whatever other routes you have
{
path: '?$lazy-service', //some name that will not be used
loadChildren: 'app/lazy-service/lazy-service.module#LazyServiceModule',
},
])],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
在组件中使用它
constructor(
private loader: NgModuleFactoryLoader,
private injector: Injector,
) {
}
async loadServiceAndCall() {
const factory = await this.loader.load('app/lazy-service/lazy-service.module#LazyServiceModule');
const moduleRef = factory.create(this.injector);
const service: LazyService = moduleRef.injector.get(LAZY_SERVICE_TOKEN);
this.value = service.process('"from app.component.ts"')
}