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

Posted

技术标签:

【中文标题】无法使用 ngx translate/core - angular 2 typescript 获得文本的动态翻译【英文标题】:Not able to get dynamic translation of text using 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 调用这个函数。 重复? ***.com/questions/35655361/… 【参考方案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');

【讨论】:

以上是关于无法使用 ngx translate/core - angular 2 typescript 获得文本的动态翻译的主要内容,如果未能解决你的问题,请参考以下文章

Ionic国际化解决方案

如何处理未满足的对等依赖?

无法使用 ngx-awesome-uploader 重命名文件

无法使用角度为5的ngx-cookie-service

离子服务无法获取/找不到模块'@ionic-native/splash-screen/ngx'

ngx-datatable ERESOLVE 无法解析依赖树