角度-在模块定义中使用动态变量 [英] Angular - Use dynamic variables in module definition

问题描述

我有一个模块(带有@NgModule)，我需要导入一个模块:

I have a module (with @NgModule) and I need to import a module:

MqttModule.forRoot(environment.MQTT_SERVICE_OPTIONS)

问题是我想从环境而不是从配置文件中获取值.

The problem is that I want to get the value not from the environment but from a configuration file.

我创建了一个从配置文件加载属性的服务，但是我不知道如何在模块定义类中使用它.我在某些组件中使用它，并且一切工作正常(只是通过构造函数注入)，但是在这里我没有上下文.

I've created a service that loads the properties from a config file but I don't know how to use it in the module definition class. I'm using it in some components and everything is working great (just injecting through the constructor), but here I don't have a context for that.

推荐答案

我已经创建了一个从配置文件中加载属性的服务，但是我不知道如何在模块定义类中使用它.

I've created a service that loads the properties from a config file but I don't know how to use it in the module definition class.

您不能使用Angular服务，因为这需要初始化注射器.在启动Angular中的任何东西之前，需要先配置 ngModule .

You can't use an Angular service, because that requires the injector to be initialized. The ngModule needs to be configured before anything in Angular is started.

root 模块由 main.ts 文件中的 plaformBrowserDynamic().bootstrapModule(AppModule)代码行加载.这是Angular中所有内容的开始位置.

The root module is loaded by the plaformBrowserDynamic().bootstrapModule(AppModule) line of code in your main.ts file. This is where everything in Angular gets started.

您只需要在执行此代码行之前加载配置，就不会有任何技术问题来延迟此操作.引导程序在此步骤进行的异步操作将显示空白页，直到操作完成为止，这会带来糟糕的用户体验.

You just need to load your configuration before this line of code is executed, and there is no technical problems delaying this operation. An asynchronous operation at this step in the bootstrap will show a blank page until the operation is complete, and this makes for a poor user experience.

我可以通过将 main.ts 更改为以下内容来演示效果:

I can demonstrate the effect by changing main.ts to the following:

(function () {
    return new Promise(resolver => {
        window.setTimeout(() => resolver(), 5000);
    });
})().then(() => {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.log(err));
});

以上内容只不过是将Angular的启动延迟5秒钟而已.

The above does nothing but delay the bootstrapping of Angular for 5 seconds.

这是为什么您不应该在应用启动时异步加载资源的一个很好的理由，但是，如果您真的想这样做，就没有理由不起作用.

It's a good reason why you shouldn't load resources asynchronously when the app is starting, but if you really want to do it there is no reason why it wouldn't work.

您需要更改promise，以便将其解析为所需的配置设置，然后将其传递给 AppModule 中的静态函数.

You'll need to change the promise so that it resolves to the configuration settings you need, and then pass this to a static function in your AppModule.

我将更新示例，但是假设您的最终源代码正在向远程配置文件发出HTTP请求.

I'll update my example, but imagine your final source code is making an HTTP request for the remote configuration file.

(function () {
    return new Promise(resolver => {
        const exampleConfig = {
            options: 'ABC'
        };
        window.setTimeout(() => resolver(exampleConfig), 5000);
    });
})().then(config => {
    platformBrowserDynamic().bootstrapModule(AppModule.withConfig(config))
        .catch(err => console.log(err));
});

您现在必须为 AppModule 手动创建模块定义，但这与模块实现 forRoot()方法的方式完全相同.我刚刚将其重命名为 withConfig()，所以听起来更好.

You'll now have to create the module definition manually for the AppModule, but this works exactly the same for how modules implement forRoot() methods. I've just renamed it to withConfig() so it sounds better.

@NgModule()
export class AppModule {
    static withConfig(config: any): ModuleWithProviders {
        return {
            ngModule: AppModule,
            imports: [
                MqttModule.forRoot(config)
            ]
        };
    }
}

我强烈建议后端服务器将所需的配置数据注入到 index.html 中，以便不需要异步操作.然后，您可以在 AppModule 中引用全局变量，并跳过 withConfig()步骤.服务器应该负责Angular应用程序的引导状态 .

I strongly recommend that the back-end server inject the required configuration data into the index.html so that there is no need for an async operation. You could then reference a global variable in the AppModule and skip the withConfig() step. The server should be responsible for the bootstrap state of the Angular application.

这篇关于角度-在模块定义中使用动态变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！