[英]Angular: How to correctly implement APP_INITIALIZER
我有一个Angular 5.2.0应用程序。 我查找了如何实现APP_INITIALIZER
以在应用程序启动之前加载配置信息。 这是app.module
:
providers: [
ConfigurationService,
{
provide: APP_INITIALIZER,
useFactory: (configService: ConfigurationService) =>
() => configService.loadConfigurationData(),
deps: [ConfigurationService],
multi: true
}
],
这里的configuration.service
:
import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Configuration } from './configuration';
@Injectable()
export class ConfigurationService {
private readonly configUrlPath: string = 'Home/Configuration';
private configData: Configuration;
constructor(
private http: HttpClient,
@Inject('BASE_URL') private originUrl: string) { }
loadConfigurationData() {
this.http
.get<Configuration>(`${this.originUrl}${this.configUrlPath}`)
.subscribe(result => {
this.configData = {
test1ServiceUrl: result["test1ServiceUrl"],
test2ServiceUrl: result["test2ServiceUrl"]
}
});
}
get config(): Configuration {
return this.configData;
}
}
以下是使用configData
的组件构造函数的示例:
export class TestComponent {
public test1ServiceUrl: string;
constructor(public configService: ConfigurationService) {
this.test1ServiceUrl = this.configService.config.test1ServiceUrl;
}
}
它适用于<router-outlet></router-outlet>
中定义的所有组件。 但是<router-outlet></router-outlet>
之外的组件中的相同实现不起作用。
当我调试它不起作用的组件的相应构造函数时,它说configService
为null
。
为什么APP_INITIALIZER
在<router-outlet></router-outlet>
内部组件的构造函数被调用之前而不是在<router-outlet></router-outlet>
外部组件的构造函数之前执行?
由于如何APP_INTIALIZER
工作,它的预期,异步初始化返回承诺,但您的实现APP_INTIALIZER
,多供应商不会因为loadConfigurationData
函数不返回任何东西。
它应该是这样的:
loadConfigurationData(): Promise<Configuration> {
return this.http.get<Configuration>(`${this.originUrl}${this.configUrlPath}`)
.do(result => {
this.configData = result;
})
.toPromise();
}
做类似的事情
export function StartupServiceFactory(startupService: StartupService) {
return () => startupService.load();
}
const APPINIT_PROVIDES = [
StartupService,
{
provide: APP_INITIALIZER,
useFactory: StartupServiceFactory,
deps: [StartupService],
multi: true,
},
];
启动服务
load():Promise{
return new Promise(resolve, reject){
//load all your configuration
resolve();
}
}
我有一个类似的问题。 修复方法大致相同,实际上返回了一个承诺。 请参阅: ngOnInit 在 APP_INITIALIZER 完成之前启动
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.