将动态对象传递给角度模块的 forRoot() [英] Passing dynamic object to an angular module's forRoot()

问题描述

我正在使用包 ngx-cookieconsent 将模块导入为:

I'm using the package ngx-cookieconsent which imports the module as:

const cookieConfig: NgcCookieConsentConfig = {曲奇饼": {域":本地主机"},..."theme": "block",内容": {"policy": "Cookie 政策"}};...@NgModule({进口:[NgcCookieConsentModule.forRoot(cookieConfig)]

但是，配置中的域属性将在运行时设置，因此我不能将其定义为常量.为了解决这个问题，我做了以下事情:

However, the domain property on the config will be set at runtime and so I can't have this defined as a constant. To get round this I have done the following:

创建了一个 ConfigurationService 来获取配置并存储它:

Created a ConfigurationService that gets the config and stores it:

@Injectable()
export class ConfigurationService {

  private configuration: IServerConfiguration;

  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) { }

  loadConfig() {
    return this.http.get<IServerConfiguration>(this.baseUrl + 'Configuration')
      .pipe(
        tap(config => {
          this.configuration = <IServerConfiguration>(config);
        })
      )
      .toPromise();
  }

  public domain(): string {
    return this.configuration.domain;
  }
}

并将其设置为 APP_INITIALIZER 以便首先调用配置:

And this is set up as an APP_INITIALIZER so that the config is called first:

export function loadConfiguration(configService: ConfigurationService) {
  return () => configService.loadConfig();
}

...
 providers: [
    ConfigurationService,   
    {
      provide: APP_INITIALIZER,
      useFactory: loadConfiguration,
      multi: true,
      deps: [ConfigurationService]
    }],

然后创建了一个类来使用配置创建我的 cookieConsentOptions 对象:

And then have created a class to create my cookieConsentOptions object using the config:

@Injectable()
export class CookieConstentService {

  cookieDomain: string;

  constructor(configService: ConfigurationService) {
    this.cookieDomain = configService.domain();
  }

  get cookieConstentOptions(): NgcCookieConsentConfig {
    return {
      "cookie": {
        "domain": this.cookieDomain
      },
      "position": "top-right",      
      "content": {
        "message": "This website uses cookies to ensure you get the best experience on our website."
      }
    };
  }

问题

我已经在 configService 和 CookieConstentService 之间建立了依赖关系，所以我只有在有配置值时才创建 cookie 选项.

I've got the dependency set up between the configService and the CookieConstentService so that I only create the the cookie options when I have the config values.

但是，我不确定如何将动态值传递给模块的 .forRoot().我应该能够执行 cookieConsentService.cookieConstentOptions() 来获取对象，但我不确定在哪里实例化它以在模块导入中使用.它需要一个依赖项，所以不能自己创建一个新实例.

However, I am unsure how to pass a dynamic value to the .forRoot() of a module. I should be able to do cookieConsentService.cookieConstentOptions() to get the object but I'm not sure where to instantiate this to be used in he module import. It takes a dependency so can't just create a new instance myself.

任何想法如何有效地将方法注入到 3rd 方模块的 forRoot() 中?

Any ideas how I effectively inject a method into a 3rd party module's forRoot()?

谢谢

推荐答案

发布这个问题后我了解到传递给 forRoot() 方法的对象本质上是一个单例，所以如果我设置任何在它被初始化之前的值然后它将使用它.我实现的方式是:

After posting this question I learnt that the object passed into the forRoot() method is essentially a singleton, so if I set any values before it gets initialised then it will use this. The way I implemented this was:

1. 使用常量/默认设置创建选项的实例(这些在环境之间不会改变):

import { NgcCookieConsentConfig } from "ngx-cookieconsent";

export const cookieConsentOptions: NgcCookieConsentConfig  =
{
  "cookie": {
    "domain": "not-set"
  },
  "position": "bottom-right",
  "theme": "block",
  "palette": {
    "popup": {
      "background": "#df1010",
      "text": "#ffffff",
      "link": "#ffffff"
    },
    "button": {
      "background": "#ffffff",
      "text": "#000000",
      "border": "transparent"
    }
  },
  "type": "info",
  "content": {
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    "dismiss": "Got it!",
    "deny": "Refuse cookies",
    "link": "Learn more",
    "href": "/cookie-policy",
    "policy": "Cookie Policy",
    "target": "_self"
  } 
};

将 APP_INITIALIZER 添加到注入 NgcCookieConsentConfig 对象的 appModule.这将传入上面创建的对象:

Add an APP_INITIALIZER to the appModule which injects the NgcCookieConsentConfig object. This will pass in the object created above:

...
{
      provide: APP_INITIALIZER,
      useFactory: cookieConfigFactory,
      deps: [HttpClient, NgcCookieConsentConfig, ConfigurationService],
      multi: true
    },
...

1. 并创建上面使用的方法:

export function cookieConfigFactory(http: HttpClient, config: NgcCookieConsentConfig, configService: ConfigurationService) {
  return () => configService.loadConfig().then(x => config.cookie.domain = x.domain)
}

我从自定义配置服务中获取 cookie 域的值，因此为什么要注入它，您的可能会有所不同.

I'm getting the value for the cookie domain from a custom config service hence why it's being injected in, yours might be different.

1. 最后在 appModules 中的模块导入中，导入传入第一步创建的对象的 CookieConsent 模块:

NgcCookieConsentModule.forRoot(cookieConsentOptions)

这篇关于将动态对象传递给角度模块的 forRoot()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！