一种解决方法是在应用程序主模块中使用APP_INITIALIZER,并将其注册为providers。在接下来的示例中,我们使用一个名为ConfigService的服务来模拟导入依赖项的过程,以及一个名为appInitProvider的提供者,以便等待这些依赖项导入完毕后再继续应用程序的启动。
app.module.ts:
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ConfigService } from './shared/config.service';
import { AppComponent } from './app.component';
function appInit(configService: ConfigService) {
return () => configService.loadConfig();
}
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
ConfigService,
{
provide: APP_INITIALIZER,
useFactory: appInit,
deps: [ConfigService],
multi: true,
},
],
bootstrap: [AppComponent],
})
export class AppModule {}
在上面的示例中,我们注入了ConfigService,并将其传递给appInit函数。该函数将其返回值设置为一个可以解析的Promise
ConfigService示例:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class ConfigService {
private configUrl = 'assets/config.json';
constructor(private http: HttpClient) {}
loadConfig() {
return this.http.get(this.configUrl).toPromise();
}
}
上面的示例具有简单的loadConfig方法,以便在应用程序启动时导入config.json文件。当loadConfig方法完成时,它将返回Promise
这是一种可靠的方法,让你的应用程序在应用程序依赖项完成导入后继续启动。