我一直在尝试在引导过程中使用APP_INITIALIZER
来加载一些配置数据(类似于How to pass parameters rendered from backend to angular2 bootstrap method,Angular2 APP_INITIALIZER not consistent等)。
我面临的问题是我需要发出2个请求,第一个请求到URL所在的本地json文件,然后请求该URL获取实际配置。
出于某种原因,启动是不延迟,直到承诺结算。
这是通过APP_INITIALIZER
public load(): Promise<any>
{
console.log('bootstrap loading called');
const promise = this.http.get('./src/config.json').map((res) => res.json()).toPromise();
promise.then(config => {
let url = config['URL'];
console.log("loading external config from: ./src/" + url);
this.http.get('./src/' + url).map(r => r.json()).subscribe(r => { this.config = r; console.dir(r);});
});
return promise;
}
这是一个完整的plnkr演示问题(检查控制台输出)。
显然,我错过了对这个概念的重要理解。
如何让应用程序等待两个请求在加载组件之前返回?
答案 0 :(得分:6)
1)回复承诺
export function init(config: ConfigService) {
return () => config.load();
}
2)保持秩序
public load(): Promise<any> {
return this.http.get('./src/config.json')
.map((res) => res.json())
.switchMap(config => {
return this.http.get('./src/' + config['URL']).map(r => r.json());
}).toPromise().then((r) => {
this.config = r;
});
}
<强> Plunker Example 强>
或与我们的rxjs运营商
public load(): Promise<any> {
return new Promise(resolve => {
const promise = this.http.get('./src/config.json').map((res) => res.json())
.subscribe(config => {
let url = config['URL'];
this.http.get('./src/' + url).map(r => r.json())
.subscribe(r => {
this.config = r;
resolve();
});
});
});
}
<强> Plunker Example 强>
答案 1 :(得分:2)
你没有在提供的plunkr中回复任何承诺:
export function init(config: ConfigService) {
return () => {
config.load();
};
}
实际应该是:
export function init(config: ConfigService) {
return () => config.load();
}
或
export function init(config: ConfigService) {
return () => {
return config.load();
}
}