无法使用 ngx translate/core - angular 2 typescript 获得文本的动态翻译答案

【问题标题】：Not able to get dynamic translation of text using ngx translate/core - angular 2 typescript无法使用 ngx translate/core - angular 2 typescript 获得文本的动态翻译
【发布时间】：2017-08-17 16:54:33
【问题描述】：

问题：

我有来自 Json 文件的动态文本。我正在使用这样的 translate.get() 方法：

this.translate.get('keyInJson').subscribe(res => { 
                this.valueFromJson = res;
/*
creating an object using above text
*/
            });

由于这是异步的，我无法在页面呈现时获得翻译后的文本。我尝试将上述方法包装在 Observables 和 Promises 中，但在页面加载期间无法获得文本的翻译版本。在尝试不同的方法后，我能够得到翻译后的文本，但代码变得过于复杂且不可靠。

预期/期望的行为 应该加载文本的翻译版本

重现问题 动态生成文本，而不是在 html 上硬编码，然后尝试渲染翻译版本。

环境 Angular2、Typescript、Ionic 2

【问题讨论】：

您发布的代码示例不是有效的打字稿代码。您在该语句的中间有一个 html
元素。请在您的问题中修复您的代码。
编辑了描述
您能否提供更多有关示例代码所在位置以及valueFromJson 使用位置的上下文？例如，如果上面的代码在组件的构造函数中，并且您想使用组件模板中的值，那么您应该可以将{{valueFromJson}} 放入模板中而不会出现问题。
示例代码位于全局服务中的一个函数中，我已将其注入到我的组件中。我从组件的 ngOnInit 调用这个函数。
重复？ stackoverflow.com/questions/35655361/…

标签： javascript angular typescript ionic2

【解决方案1】：

@nkadu1

instant(key: string|Array, interpolateParams?: Object): string|Object: 获取键（或键数组）的即时翻译值。此方法是同步的，默认的文件加载器是异步的。 您有责任了解您的翻译何时加载以及使用此方法是安全的。

const translated = this.translate.instant('keyInJson');

@masterach TranslateHttpLoader 是您正在寻找的。 Here's an article 可能对你有帮助。

【讨论】：

【解决方案2】：

我现在一直在使用@ngx-translate。我以两种方式使用该模块：

使用管道：

{{'code_to_translate' |翻译}}

使用服务

const translateText: 字符串 = this.translateService.instant('code_to_translate')

翻译服务应该在你的组件（或服务）的构造函数中传递

通常我在加载组件之前在我的 app.ini 函数中声明字符串结果，并为我的整个应用程序只使用一种翻译服务。我还声明了我的自定义 TranslateLoader 来管理来自任何地方的翻译源（外部 api、json 文件等）

【讨论】：

【解决方案3】：

为什么不使用html中的管道而不是ts中的翻译？

<div>{{ 'HELLO' | translate:param }}</div>

或

<div [innerHTML]="'HELLO' | translate"></div>

【讨论】：

【解决方案4】：

在您的全球服务中：

private _valueFromJson: string;
constructor(private translate: TranslateService) {
  translate.get('keyInJson').subscribe(res => { 
    this._valueFromJson = res;
  });
}
get valueFromJson() {
  return this._valueFromJson;
}

或者：

public valueFromJson: string;
constructor(private translate: TranslateService) {
  translate.get('keyInJson').subscribe(res => { 
    this.valueFromJson = res;
  });
}

然后，在你的组件模板中就可以直接绑定了：

<div>{{ globalService.valueFromJson }}</div>

或者，您可以使用synchronous method：

this.valueFromJson = translate.instant('keyInJson');

【讨论】：