ngx-translate 不適用於延遲加載的模塊

Question

我想在 angular 5 項目延遲加載模塊中實現ngx-translate ，它僅適用於父模塊，但不適用於我的子模塊，因此請提出更好的解決方案。

我為應用程序模塊編寫代碼。

我正在使用@ngx-translate/core 和@ngx-translate/http-loader

app.module.ts

 TranslateModule.forRoot({
      @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    LayoutModule,
    HttpClientModule,
    BrowserAnimationsModule,
    HttpModule, ReactiveFormsModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false }
    ),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/app/', '.json');

}

子模塊.ts

@NgModule({
  imports: [

    RouterModule,
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    GridModule,
    DropDownsModule,
    FormsModule,
    ExcelModule,
    ControlMessagesModule, ReactiveFormsModule,    
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: (AdminTranslateLoader),
        deps: [HttpClient]
      },
      isolate: true
    })

  ],

export function AdminTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/admin/', '.json');
}

Answer 1

我有一個類似的問題，我在SharedModule 中調用TranslateModule.forRoot() ：

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

這個SharedModule是由我所有其他延遲加載的模塊導入的。 我有一個菜單欄子組件，帶有一個用於切換語言的按鈕。 該組件以構造函數的常用方式通過注入獲取TranslateService ：

constructor(private translate: TranslateService) { }

問題

調用TranslateService.use('[LANG-CODE]')確實會更改菜單欄組件中的翻譯。 但它沒有改變任何其他子組件的翻譯。

這對我有用

我在 github 上發現了這個（相當老的）問題，基本上說我們不應該在SharedModule 中調用TranslateModule.forRoot() 。

github 問題 - TranslateModule.forRoot 不應放在 SharedModule 中

所以我按照建議將TranslateModule.forRoot()移到AppModule中，並導出TranslateModule 。 然后我在SharedModule導入和導出TranslateModule 。

這樣做之后，調用TranslateService.use()也會翻譯其他子組件的文本，而不僅僅是調用函數的那個​​（在我的例子中是menu-bar ）

希望其他有類似問題的人會發現這很有用。

Answer 2

我的Angular 12項目也有同樣的問題。

將項目配置為：

1. 在app.module.ts添加了TranslateModule.forRoot()像

export function httpLoaderFactory(http: HttpClient){
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    TranslateModule.forRoot(
      {
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient]
      }
    }
    ),
  ]
})
export class AppModule { }

2. 在我的SharedModule導入和導出TranslateModule 。
3. 在延遲加載的組件模塊中導入了SharedModule 。
4. 它將順利運行。

Answer 3

無論如何，共享模塊概念是一個合適的解決方案，但是調用子模塊並更改forChild()在角度 12 中對我forChild() 。

TranslateModule.forChild({
      loader: {
        provide: TranslateModule,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })

Answer 4

它是一個錯誤......解決方法是確保在模塊加載時重新初始化語言。 為此，我將此構造函數添加到所有延遲加載的模塊中：

constructor(protected translateService: TranslateService) {
   const currentLang = translateService.currentLang;
   translateService.currentLang = '';
   translateService.use(currentLang);
}

Answer 5

我認為您必須設置默認 lang ！ 例如 ：

export class ChildModule {
 constructor(private readonly translate: TranslateService) {
    translate.setDefaultLang(translate.getBrowserLang());
  }
}