无法使用 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 获得文本的动态翻译的主要内容,如果未能解决你的问题,请参考以下文章
无法使用 ngx-awesome-uploader 重命名文件