javascript - 在 forRoot 中使用获取的配置

Question

我正在编写一个使用@ngx-translate 的 Angular 应用程序。使用 TranslateModule.forRoot(...) 我提供了一个 TranslateLoader:

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient, ConfigService, LogService]
      }   
    })     
  ]
})

我还有一个 ConfigService，它使用 APP_INITIALIZER 加载 config.json。

问题是，TranslateLoader 需要来自配置的 url。但是 forRoot() 在 APP_INITIALIZER 之前运行，这导致 ConfigService 没有加载配置和空 url。

还有其他方法吗？

目前我正在考虑手动引导 angular。

Answer 1

对于仍在查看此内容的任何人，我找到了一种在 App Init 之后使用 TranslateLoader 提供程序加载翻译的方法。 ngx-translate 库允许您覆盖当前加载器。所以我们可以在应用程序完成引导后传递一个新工厂。

export function HttpLoaderFactory(handler: HttpBackend, valueAvailableAfterInit) {
  const http = new HttpClient(handler);
  return new TranslateHttpLoader(http, valueAvailableAfterInit, '.json');
}

export class AppModule {
  constructor(
    private translate: TranslateService,
    private handler: HttpBackend
  ) {}

  ngDoBootstrap() {
    const valueAccessableAfterBootstrap = `I'll leave this to your use-case. For me it is an environment variable overwritten via ngOnInit in app.component`;

    this.translate.currentLoader = HttpLoaderFactory(this.handler, valueAccessableAfterBootstrap); // replace loader
    this.translate.reloadLang('en-US').pipe(take(1)).subscribe(); // reload translations with new loader
  }
}