angular - 在 APP_INITIALIZE 之后初始化模块

标签 angular

在我的 Angular 6 应用程序中,我通过这样的 Http 服务加载我的外部化配置:

export function getSettings(appLoadService: ConfigLoadService) {
  return () => appLoadService.getSettings();
}

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [],
  providers: [
    ConfigLoadService,
    {provide: APP_INITIALIZER, useFactory: getSettings, deps: [ConfigLoadService], multi: true}]
})
export class AppLoadModule {
}

服务:

@Injectable()
export class ConfigLoadService {

  constructor(private http: HttpClient) {
  }

  getSettings(): Subscription {
    console.log("Loading config from server...");
    return this.http
      .get("/config.json")
      .subscribe((config: any) => {

        AppSettings.API_BASE_URL = config.API_BASE_URL;

        console.log("API_BASE_URL: " + AppSettings.API_BASE_URL);
      });
  }
}

现在我想添加一个外部依赖,需要使用当前配置进行初始化:

@NgModule({
  imports:
    DepModule.forRoot({
      apiBaseUrl: AppSettings.API_BASE_URL
    }),
  ],[...]

这里的问题是依赖项是在 APP_INITIALIZER 之前导入和初始化的,因此没有正确配置。我在这里缺少什么?

最佳答案

APP_INITIALIZER 提供者工厂方法必须返回一个 promise

所以你会做这样的事情:

@Injectable()
export class ConfigLoadService {

  private myConfig;
  constructor(private http: HttpClient) {
  }
  getSettings() {
    return this.http.get('/config.json')
      .toPromise()
      .then(data => {
        this.myConfig = data;
      });
  }

  getConfig() {
    return this.myConfig;
  }
}

Juri 写了一篇关于它的博客你可以阅读更多 App Runtime Config

关于angular - 在 APP_INITIALIZE 之后初始化模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51878432/

相关文章:

依赖于另一个表单控件的 Angular 2 自定义验证器

html - Ionic3如何播放音频文件?

浏览器子窗口中的 Angular 组件

twitter-bootstrap - 如何使用 ng2-bootstrap 从 Bootstrap 3 切换到 Bootstrap 4?

angular - 使用 Webpack 将 PrimeNG 添加到 Angular2 应用程序中

Angular2,调用服务函数,无法读取未定义的属性 '***'

Angular 7无法访问管理文件夹文件

javascript - 文本区域的正则表达式

javascript - Ionic JavaScript 函数无需等待 Promise 即可执行

Angular Material - mat-table 不渲染来自 rest api 的数据