如果刷新,带有共享模块的 Angular 5 和 ngx-translate 松散翻译

标签 angular ngx-translate

我有一个使用 ngx-translate 的 Angular 应用程序。以下版本:

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

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

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

一切都像魅力一样,除了当我刷新一个页面时,该页面位于与应用程序模块(导入 SharedModule)不同的模块中。 在这种情况下,我需要导航回主页(在 AppModule 中编码),一旦我到达主页,ngx-translate 就会恢复工作,我可以使用 ngx-translate 重新导航到其他页面。

有人能帮帮我吗?提前致谢

更新 似乎问题与刷新页面时 translateService.currentLang 未定义有关。如果我通过 translateService.use(language) 以编程方式在 ngOnInit 中设置语言,它就可以工作。 如何通过设置默认 currentLang 来避免在每个组件中手动设置此检查 currentLang 变量?

最佳答案

我的共享模块中也有 translateModule,每个模块都导入它。我在共享模块中导出了 TranslateModule。这样做,一切都按预期工作,每个模块都显示了它的翻译。也许尝试同样的事情,看看它是否适合你。

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

通过 app.module 在引导组件中通过 translateService 设置 useDefaultLanguage。这样,它是唯一在顶级设置默认语言的地方。

关于如果刷新,带有共享模块的 Angular 5 和 ngx-translate 松散翻译,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51559743/

相关文章:

Angular 2 CLI 项目在部署时无法加载资源

angular - 通过服务器上的 Http 请求的 URL 必须是绝对的。网址 : ./assets/i18n/en.json

Angular 8 未能部署到 Github Pages -

将 TranslateService 注入(inject)拦截器时的 Angular 循环依赖

angular - 我如何知道 html 组件的翻译文件中的某个元素是否为空?

javascript - 多次调用列表格式化程序

javascript - Angular 将样式标签添加到 innerHTML

javascript - 在父表单提交上重置子组件的输入字段

javascript - Angular 5.翻译-在翻译之前操作所有键

javascript - 如何从 JSON 数组中获取数据并在表中显示数据?