角度:将参数传递给NgModule [英] Angular: Pass parameters to NgModule

问题描述

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

I have modules that use TranslateModule from ngx-translate (the question is not about this lib but about Angular). It looks something like this:

@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).那就是我发现的:

Now there are 5 modules that look like this one. I decided to move TranslateModule to SharedModule. But here is a problem: I have to set a path for each module individually (for ex. ./assets/i18n/todos). That's what I found:

@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不加载翻译文件.控制台中没有错误.我在做什么错了?

But it doesn't work. TranslateHttpLoader does not load translation files. No errors in the console. What am I doing wrong?

推荐答案

我找到了解决方案.我不得不将TranslateModule.forChild(...)导入到SharedModule中，但是在SharedModule#forChild方法中提供了TranslateLoader:

I found a solution. I had to import TranslateModule.forChild(...) into SharedModule, but provide TranslateLoader inside SharedModule#forChild method:

@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]
        }
      ]
    }
  }

}

这篇关于角度:将参数传递给NgModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！