angular - 将动态对象传递给 Angular 模块的 forRoot()

Question

我正在使用包 ngx-cookieconsent将模块导入为:
const cookieConfig: NgcCookieConsentConfig = {
"cookie": {
"domain": "localhost"
},
...
"theme": "block",
"content": {
"policy": "Cookie Policy"
}
};
...
@NgModule({
imports: [
NgcCookieConsentModule.forRoot(cookieConfig)
]
但是，配置上的域属性将在运行时设置，因此我不能将其定义为常量。为了解决这个问题，我做了以下工作:

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

@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以便首先调用配置:

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

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

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

@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 选项。

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

关于我如何有效地将方法注入(inject)第 3 方模块的 forRoot() 的任何想法?

谢谢

Answer 1

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

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

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到注入(inject) NgcCookieConsentConfig 的 appModule目的。这将传入上面创建的对象:

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

并创建上面使用的方法:

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

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

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

NgcCookieConsentModule.forRoot(cookieConsentOptions)