非延迟加载模块中 forChild 的 Angular ngx 翻译问题

Question

我遇到 TranslateModule.forChild() 问题，在某些情况下它不会触发

export function MainHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, `${Environment.ASSETS_BASE_URL}/assets/i18n/main/`, '.json');
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  exports: [],
  bootstrap: [AppComponent],
  imports: [
    CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: MainHttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    ChildModule
  ]

和子模块：

export function ChildHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, `${Environment.ASSETS_BASE_URL}/assets/i18n/child/`, '.json');
}



@NgModule({
  declarations: [ChildComponent],
  imports: [
    CommonModule,
    TableModule,
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: ChildHttpLoaderFactory,
        deps: [HttpClient]
      },
      extend: true
    }),
  ],
  providers: [TranslateService],
  exports: [
    ChildComponent
  ]
})
export class ChildModule {
  constructor(private translate: TranslateService) {
    this.translate.currentLang = '';
    this.translate.use('en');
  }
}

这是问题，当我将 ChildModule 导入 ParentModule 并按标签使用组件时，ChildHttpLoaderFactory 不会触发。但如果你使用延迟加载 - 一切都好。那么，也许有人知道如何触发它？

感谢您的宝贵时间

Answer 1

发生这种情况是因为

TranslateModule.forChild()

设计用于延迟加载模块。 当您急切地导入子模块时，Angular 不会创建新的子注入器来进行翻译。 因此，您的

ChildHttpLoaderFactory

（通常）不会被呼叫。

正如您所说，一种解决方案是使用延迟加载，以便每个模块都有自己的翻译加载器。

另一种选择是简单地使用一个

TranslateModule.forRoot()

。

在您的

AppModule

（或任何常见的根模块）中使用：

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: MainHttpLoaderFactory,
    deps: [HttpClient]
  }
})

然后在您的子模块中导入

TranslateModule

而不调用

forChild()

@NgModule({
  imports: [CommonModule, TranslateModule],
  declarations: [ChildComponent],
  exports: [ChildComponent]
})
export class ChildModule {
  constructor(private translate: TranslateService) {
    // manually load or merge child translations:
    //  1. you could directly load a JSON via HttpClient
    //  2. or set them in code: this.translate.setTranslation('en', {...}, true);
  }
}

如果您需要特定于子级的翻译文件，您可以在子模块/组件中手动执行此操作。

this.http.get('/assets/i18n/child/en.json')
  .subscribe(childEn => {
    this.translate.setTranslation('en', childEn, /* merge */ true);
  });