Jas*_* K. 5 lazy-loading angular-services angular angular-injector
我正在尝试从组件内的延迟加载模块访问服务实例。该模块没有任何可用于基于构造函数的注入的组件。Angular 文档没有帮助,我在 Medium 和类似网站上找到的所有各种教程都不适用。
以下是执行服务延迟加载的组件的代码。
await import ('./lazy.module')
.then(module => module.LazyModule)
.then(module => {return module;})
.then(module => this.compiler.compileModuleAsync(module))
.then(factory => {
let module = factory.create(this.injector);
this.lazyService = module.injector.get(LazyService);
});
Run Code Online (Sandbox Code Playgroud)
问题在于,在当前组件中包含 LazyService 将无法达到延迟加载的目的,并且 get() 方法似乎需要一个类型,这种方法只会产生先有鸡还是先有蛋的问题。我将 InjectionToken 作为另一种选择,但它需要一个通用定义,再次需要导入 LazyService。
谁能解释一下延迟服务加载应该如何完成?
我最终找到了一种方法,它似乎可以解决 Angular 的缺陷,而不是基本的 Angular 功能。
这个想法是在模块定义中添加对服务的引用。就我而言,我将服务引用存储在添加到模块定义中的名为“entrySet”的静态变量中。“lazyService”变量只是添加到想要延迟加载服务的组件中的“any”类型的变量。
因此,这里是之前发布的用于检索服务的代码的更新:
await import( './lazy.module' )
.then( module => module.LazyModule )
.then( module => {
this.lazyService = module.entrySet.lazyService;
return module;
})
.then( module => this.compiler.compileModuleAsync( module ) )
.then( factory => {
let module = factory.create( this.injector );
this.lazyService = module.injector.get( this.lazyService );
});
Run Code Online (Sandbox Code Playgroud)
下面的导出块中是使服务可用的 LazyModule 的相关代码:
@NgModule({
bootstrap: [],
declarations: []
imports:
[
CommonModule,
],
providers:
[
LazyService
]
})
export class SnapshotManagerModule
{
static entrySet = {
lazyService: LazyService
};
}
Run Code Online (Sandbox Code Playgroud)
我在本文内容的帮助下解决了这个问题(https://medium.com/@ebrehault_25985/angular-9-makes-lazy-loading-without-routing-so-easy-18774092ed34)
| 归档时间: |
|
| 查看次数: |
3317 次 |
| 最近记录: |