【问题标题】:Angular 5 and ngx-translate with shared module loose translations if refresh如果刷新,带有共享模块的 Angular 5 和 ngx-translate 会松散翻译
【发布时间】:2019-01-04 16:24:57
【问题描述】:

我有一个使用 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 变量?

【问题讨论】:

    标签: angular ngx-translate


    【解决方案1】:

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

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

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

    【讨论】:

    • 我试过了,但没有成功。如果我刷新页面,我会丢失翻译,我仍然会看到关键字而不是值
    • 您的其他模块是否导入共享模块?然后你把 translatemodule loader + 函数放到共享模块的路径中?
    • 我在主要问题中分享了更新。你对此有什么想法吗?
    • 在 app.module 中引导的组件中通过 translateService.use(language) 设置 ngOnInit -- 应该是唯一的地方。
    • 你是对的!谢谢 Taranjit Kang,我将为您分配正确的答案 :)
    猜你喜欢
    • 2020-11-08
    • 1970-01-01
    • 1970-01-01
    • 2022-06-23
    • 1970-01-01
    • 1970-01-01
    • 2019-10-02
    • 1970-01-01
    • 2021-04-22
    相关资源
    最近更新 更多