问题描述
我有一个 Angular 5.2.0 应用程序.我查看了如何在应用启动之前实现APP_INITIALIZER
来加载配置信息.这里是app.module
的摘录:
I have a Angular 5.2.0 application.I looked up how to implement APP_INITIALIZER
to load configuration information before the app starts.Here an extract of the 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
的组件的构造函数的示例:
Here is an example of a constructor of a component where the configData
is used:
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
.
为什么在<router-outlet></router-outlet>
内部的组件的构造函数被调用之前而不在<router-outlet></router-outlet>
外部的组件的构造函数之前执行APP_INITIALIZER
?
It works fine with all the components which are defined within the <router-outlet></router-outlet>
. But the same implementation in a component outside the <router-outlet></router-outlet>
does not work.
When I debug the respective constructor of the component where it does not work it says that configService
is null
.
Why is the APP_INITIALIZER
executed before the constructor of a component inside the <router-outlet></router-outlet>
is called but not before the constructor of a component outside the <router-outlet></router-outlet>
?
推荐答案
由于APP_INTIALIZER
可以正常工作,预计异步初始化程序会返回promise,但是APP_INTIALIZER
multiprovider的实现不会,因为loadConfigurationData
函数不会返回任何内容.
Due to how APP_INTIALIZER
works, it's expected that asynchronous initializers return promises, but your implementation of APP_INTIALIZER
multiprovider doesn't because loadConfigurationData
function doesn't return anything.
应该是这样的:
loadConfigurationData(): Promise<Configuration> {
return this.http.get<Configuration>(`${this.originUrl}${this.configUrlPath}`)
.do(result => {
this.configData = result;
})
.toPromise();
}
这篇关于Angular:如何正确实现APP_INITIALIZER的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!