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');

}

child.module.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

我认为您必须设置默认lang！例如：

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

Answer 2

我有一个类似的问题，我在 SharedModule 中调用 TranslateModule.forRoot（）：

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

此 SharedModule 是由我所有其他 lazy-loaded 模块导入的。我有一个菜单栏子组件，其中有一个用于切换语言的按钮。该组件通过构造函数的常用方式通过注入获取 TranslateService ：

constructor(private translate: TranslateService) { }

问题

调用 TranslateService.use（'[LANG-CODE]'）确实会更改菜单栏组件中的翻译。但这并没有改变其他子组件的翻译。

这对我有用

我在github上发现了这个（相当古老的）问题，基本上说我们不应该在 SharedModule 中调用 TranslateModule.forRoot（）。
github issue - TranslateModule.forRoot should not be put in SharedModule

因此，我按照建议将 TranslateModule.forRoot（）移到了 AppModule 中，并导出了 TranslateModule 。然后，在我的 SharedModule 中导入和导出 TranslateModule 。
完成此操作后，调用“ TranslateService.use（）”也将转换其他子组件的文本，而不仅仅是调用该函数的文本（在我的情况下为 menu-bar ）

希望其他有类似问题的人会发现它有用。

Answer 3

我的 Angular 12 项目也有同样的问题。

将项目配置为：

在TranslateModule.forRoot()赞中添加了app.module.ts

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 { }

在我的 TranslateModule 中导入和导出 SharedModule。
在延迟加载的组件模块中导入了 SharedModule。
它会顺利运行。

ngx-translate不适用于延迟加载的模块

3 个答案:

问题

这对我有用