Angular6 在 forRoot() 模块中使用获取的配置变量

本文介绍了Angular6 在 forRoot() 模块中使用获取的配置变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的应用中，我需要使用 ng-intercom https://github.com/CaliStyle/ng-intercom，它需要在 forRoot() 方法中设置一个配置键.

In my app I need to use ng-intercom https://github.com/CaliStyle/ng-intercom, which requires a config key to be set in forRoot() method.

配置键是从 API 调用中加载的，在 main.ts 中完成.从 API 获取配置，然后在 AppConfigService 中设置为 APP_CONFIG，然后启动应用程序.

The config key is loaded from an API call, done in main.ts. The config is fetched from API, then set to APP_CONFIG in AppConfigService and then the app is bootstrapped.

main.ts

const appConfigRequest = new XMLHttpRequest();
appConfigRequest.addEventListener('load', onAppConfigLoad);
appConfigRequest.open('GET', 'https://api.myjson.com/bins/lf0ns');
appConfigRequest.send();

// Callback executed when app config JSON file has been loaded.
function onAppConfigLoad() {
    const config = JSON.parse(this.responseText);
    initConfig(config);
}

// Sets fetched config to AppConfigService constant APP_CONFIG and calls bootstrap()
function initConfig(config) {
    const injector = ReflectiveInjector.resolveAndCreate([AppConfigService]);
    const configService = injector.get(AppConfigService);
    configService.set(config);

    bootstrap();
}

function bootstrap() {
  platformBrowserDynamic().bootstrapModule(AppModule).then().catch(err => console.error(err));
}

app-config.service.ts

import { Injectable } from '@angular/core';

export let APP_CONFIG: any = {};

@Injectable()
export class AppConfigService {

    constructor() {}

    public set(config) {
        APP_CONFIG = Object.assign(config);
    }
}

在 AppModule 中，我导入 APP_CONFIG 并使用 IntercomModule 的 forRoot() 配置中的密钥代码>:

In AppModule I import the APP_CONFIG and use the key from the config in the forRoot() of the IntercomModule:

app.module.ts

import { NgModule, InjectionToken, Inject, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { APP_CONFIG } from './../shared/services/app-config.service';
import { IntercomModule } from 'ng-intercom';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    IntercomModule.forRoot({
        appId : APP_CONFIG.intercomKey,
        updateOnRouterChange: false
    })
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

配置示例:

{
  "production": true,
  "envName": "staging",
  "apiBaseURL": "//api.staging.site.com/v1/",
  "intercomKey": "qz0b98qo"
}

问题:初始化IntercomModule时，config key未定义APP_CONFIG.intercomKey，因为尚未从API中获取config.

The problem: when the IntercomModule is initialized, the config key is undefined APP_CONFIG.intercomKey, because the config has not been fetched from API yet.

如何确保在模块初始化时配置可用?有什么想法吗?

How do I make sure the config is available when the modules are initialized? Any ideas?

我之前曾尝试在 forRoot() 方法中调用函数，但在使用 AOT 编译应用程序时出现错误 装饰器中不支持函数调用

I have tried calling a function in the forRoot() method before but got an error Function calls are not supported in decorators when compiling the app with AOT

另见stackblitz:https://stackblitz.com/edit/angular6-intercom-issue

See also stackblitz: https://stackblitz.com/edit/angular6-intercom-issue

模块

Angular6 在 forRoot() 模块中使用获取的配置变量

问题描述

推荐答案