Angular:将参数传递给 NgModule

Question

我有使用 ngx-translate 中的 TranslateModule 的模块(问题不是关于这个库，而是关于 Angular)。它看起来像这样:

@NgModule({
  ...
  imports: [
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => new TranslateHttpLoader(http, './assets/i18n/todos/', '.json'),
        deps: [HttpClient]
      },
      isolate: true
    })
  ]
})
export class TodosModule {
}

现在有 5 个与此类似的模块。我决定将 TranslateModule 移至 SharedModule。但这里有一个问题:我必须为每个模块单独设置一个路径(例如 ./assets/i18n/todos)。这就是我发现的:

@NgModule({
  ...
  imports: [
    TranslateModule
  ],
  exports: [
    TranslateModule
  ]
})
export class SharedModule {

  static forChild(i18path: string): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
        {
          provide: TranslateModule,
          useValue: TranslateModule.forChild({
            loader: {
              provide: TranslateLoader,
              useFactory: (http: HttpClient) => new TranslateHttpLoader(http, `./assets/i18n/${i18nPath}/`, '.json'),
              deps: [HttpClient]
            },
            isolate: true
          })
        }
      ]
    }
  }

}

但是这不起作用。 TranslateHttpLoader 不加载翻译文件。控制台中没有错误。我做错了什么？

Answer 1

我找到了解决方案。我必须将 TranslateModule.forChild(...) 导入 SharedModule，但在 SharedModule#forChild 内提供 TranslateLoader方法:

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    TranslateModule.forChild({
      isolate: true
    })
  ],
  exports: [
    TranslateModule
  ]
})
export class SharedModule {

  static forChild(i18nPath: string): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
        {
          provide: TranslateLoader,
          useFactory: (http: HttpClient) => new TranslateHttpLoader(http, `./assets/i18n/${i18nPath}/`, '.json'),
          deps: [HttpClient]
        }
      ]
    }
  }

}