无法使用 ngx 翻译/核心 - 角度 2 打字稿获得文本的动态翻译

Question

问题：

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

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

由于这是异步的，因此在页面呈现时无法获取翻译的文本。我尝试将上述方法包装在可观察量，承诺中，但它无法在页面加载期间获得文本的翻译版本。在尝试了不同的方法后，我能够获得翻译的文本，但代码变得过于复杂且不可靠。

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

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

环境角度2 ， 打字稿， 离子 2

Answer 1

@nkadu1

即时(键：字符串|数组，插值参数？：对象(：字符串|对象：获取键(或键数组(的即时转换值。此方法是同步的，默认文件加载程序是异步的。您有责任知道您的翻译何时加载，并且使用此方法是安全的。

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

---

@masterach TranslateHttpLoader 就是你要找的。这是一篇可能对您有所帮助的文章。

Answer 2

我已经使用@ngx翻译一段时间了。我以两种方式使用该模块：

1. 使用管道：

{

{'code_to_translate' | 翻译 }}

1. 使用服务

常量翻译文本：字符串 = this.translateService.instant('code_to_translate'(

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

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

Answer 3

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

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

或

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

Answer 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>

或者，您可以使用同步方法：

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