Angular 5和ngx-translate与共享模块松散翻译(如果刷新) [英] Angular 5 and ngx-translate with shared module loose translations if refresh

问题描述

我有一个使用ngx-translate的角度应用程序.在版本下方:

"@angular/core": "5.2.6",
"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1"

在AppModule类中，我在下面添加了导入:

imports: [
    .....
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
    ......
]
.....
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

然后我创建了一个SharedModule来导出TranslateModule:

exports: [
    // Modules
    TranslateModule,
    ....
]

除我刷新放置在与应用程序模块(导入SharedModule)不同的模块中的页面时，所有内容都像魅力一样. 在这种情况下，我需要导航回到主页(在AppModule中编码)，一旦到达主页ngx-translate即可恢复工作，并且可以使用有效的ngx-translate重新导航至其他页面./p>

有人可以帮助我吗?预先感谢

更新 似乎问题与以下事实有关:刷新页面时，translateService.currentLang未定义.如果我通过translateService.use(language)以编程方式设置ngOnInit中的语言，则可以正常工作. 如何通过设置默认的currentLang避免在每个组件中手动设置对currentLang变量的检查?

解决方案

我在共享模块中也有translateModule，每个模块都在导入它.我在共享模块中导出了TranslateModule.这样做，一切都按预期工作，并且每个模块都显示了翻译内容.也许尝试相同的方法，看看它是否对您有用.

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

通过app.module在自举组件中通过translateService设置useDefaultLanguage.这样，它是唯一在顶层设置默认语言的地方.

I have an angular app that uses ngx-translate. Below the versions:

"@angular/core": "5.2.6",
"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1"

In the AppModule class i added the import below:

imports: [
    .....
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
    ......
]
.....
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

And i created a SharedModule that exports the TranslateModule:

exports: [
    // Modules
    TranslateModule,
    ....
]

Everything works like a charm, except when i refresh a page that is placed in a different module than app module (that imports the SharedModule). In this case I need to navigate back to the home page (coded in the AppModule), once i reach the home page ngx-translate come back to work and i can re-navigate to the other pages with ngx-translate that works.

Can anybody help me? Thanks in advance

UPDATE Seems that the problem is related to the fact that translateService.currentLang is undefined when i refresh the page. If i set programmatically the language in ngOnInit via translateService.use(language) it works. How can i avoid to set manually in every component this check on currentLang variable by setting a default currentLang?

解决方案

I had translateModule also in my shared module, and every module was importing this. I exported the TranslateModule within the sharedmodule. Doing this, everything was working as intended and every module had it's translations showing up. Maybe try the same thing and see if it works for you.

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

Set useDefaultLanguage via translateService in your bootstrapped component via app.module. That way it's the only place it sets the default language at top level.

这篇关于Angular 5和ngx-translate与共享模块松散翻译(如果刷新)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！