@ngx-translate 与 Angular 5 中的延迟加载模块答案

【问题标题】：@ngx-translate with lazy-loaded module in Angular 5@ngx-translate 与 Angular 5 中的延迟加载模块
【发布时间】：2019-02-05 01:53:22
【问题描述】：

我在我正在创建的 Angular 5 应用程序中使用 @ngx-translate 进行语言处理。该应用程序有两个功能模块，一个延迟加载，一个急切加载。

问题在于翻译管道在急切加载的模块中工作正常，但在延迟加载的模块中却不行。我该如何解决？

【问题讨论】：

您可以查看这些帖子，可能会有所帮助stackoverflow.com/a/68456163/11727315
您可以参考这些答案我添加了延迟加载模块的代码stackoverflow.com/a/68456163/11727315

标签： angular5 ngx-translate

【解决方案1】：

在我的延迟加载模块中，我必须将其添加到导入中：

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

在延迟加载的组件中我也做了类似的事情：

import {TranslateService} from '@ngx-translate/core';

在构造函数中：

private translate: TranslateService

最后是 onInit：

this.translate.use(language);

而且它工作得很好。

【讨论】：

这应该是正确的答案...因为在这种情况下，我们将使用 forChild 方法，该方法仅用于具有 ngx-translate 的延迟加载模块，并且如文档中所示。在我的情况下，我错过了组件中的注入部分，这在文档中没有描述。
@Takatalvi 注射部分是什么意思？
我现在记不太清楚了，但是阅读代码我认为注入部分是使用 setDefaultLang 和主模块中使用的语言，在我的情况下存储在本地存储中，然后使用它在该模块的组件中。即：this.translate.setDefaultLang(lang); this.translate.use(lang);
这个只加载第一次，如果你通过ui组件改变了语言，将无法正常工作
@DanielWaw 这是一个完整的救生员！我一整天都在努力完成这项工作。这就像一个魅力！绝对是我一直在寻找的解决方案。

【解决方案2】：

我也一直在努力解决同样的问题，但尚未找到可行的答案。

Angular 的好心人正在研究 i18n，但这可能需要更多时间。

虽然不理想，但您可能需要查看以下文章：

“如何使用 ngx-translate 拆分每个延迟加载模块的 i18n 文件？” @frogeret https://medium.com/@TuiZ/how-to-split-your-i18n-file-per-lazy-loaded-module-with-ngx-translate-3caef57a738f

【讨论】：

我能够在开发模式下运行应用程序，即当我以ng serve 运行应用程序时，但我无法在生产模式下构建应用程序，即ng build --prod。有什么建议吗？

【解决方案3】：

您可以查看适用于 Angular 和 Ionic 应用程序的 ngstack/translate 库。还提供对延迟加载、页面标题翻译、自定义管道和许多其他强大功能的支持。

【讨论】：