ngx-translate 不适用于延迟加载模块 [英] ngx-translate is not working for lazy loaded module

问题描述

我想在 angular 5 项目延迟加载模块中实现 ngx-translate，它仅适用于父模块，但不适用于我的子模块，因此请提出更好的解决方案.

I want to implement ngx-translate in angular 5 project lazy loaded module wise its working for only parent module but not works in my child module so please suggest better solution.

我为应用模块编写代码.

I write my code for app module .

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

and i am using @ngx-translate/core and @ngx-translate/http-loader

app.module.ts

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

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

推荐答案

我遇到了类似的问题，我在 SharedModule 中调用了 TranslateModule.forRoot():

I had a similar problem, where I was calling TranslateModule.forRoot() in a SharedModule:

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

这个SharedModule 由我所有其他延迟加载 模块导入.我有一个菜单栏子组件，带有一个用于切换语言的按钮.该组件以构造函数的常用方式通过注入获取TranslateService:

This SharedModule is imported by all my other lazy-loaded modules. I have a menu-bar child component with a button to switch language. This component gets the TranslateService via injection in the usual way of the constructor:

constructor(private translate: TranslateService) { }

问题

调用 TranslateService.use('[LANG-CODE]') 确实改变了我菜单栏组件中的翻译.但它没有改变任何其他子组件的翻译.

The Problem

Calling TranslateService.use('[LANG-CODE]') does change the translation in my menu-bar component. But it didn't change the translation for any other child components.

我在 github 上发现了这个(相当老的)问题，基本上说我们不应该在 SharedModule 中调用 TranslateModule.forRoot().

I found this (quite old) issue on github that basically says we shouldn't be calling TranslateModule.forRoot() in a SharedModule.

github 问题 - TranslateModule.forRoot 不应放在 SharedModule 中

所以我按照建议将 TranslateModule.forRoot() 移动到 AppModule 中，并导出 TranslateModule.然后我在我的 SharedModule 中导入和导出 TranslateModule.

So I moved the TranslateModule.forRoot() into the AppModule as suggested, and export the TranslateModule. Then I import and export TranslateModule in my SharedModule.

这样做之后，调用 TranslateService.use() 也会翻译其他子组件的文本，而不仅仅是调用函数(menu-bar in我的情况)

After doing this, calling TranslateService.use() translates the texts for other child components too, not just the one that is calling the function (menu-bar in my case)

希望有类似问题的其他人会发现这很有用.

Hopefully anyone else with a similar problem will find this useful.

这篇关于ngx-translate 不适用于延迟加载模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！