javascript - 动态翻译服务 Ionic 2 Angular 2 ngx-translate

标签 javascript angular ionic-framework ionic2 ngx-translate

我正在使用 ionic 2 构建一个应用程序,我想翻译服务器响应中的一些对象,而不将其存储在 JSON 文件中。

我正在使用ngx-translate

例如,我收到这样的对象:

{
"name": ["Hello", "Hola", "Bon Jour"],
"description": ["This text is in English", "This text is in Spanish", "This text is in French"]
}

我想根据所选语言在我的应用程序中设置字符串的值。我怎样才能实现这个目标?

非常感谢。

最佳答案

您可以创建一个具有 3 个键(en、es、fr)的对象,然后使用它通过“setTranslation”设置每种语言

示例:

translate.setTranslation('en', translations['en']);
translate.setTranslation('es', translations['es']);
translate.setTranslation('fr', translations['fr']);

要生成此“翻译”,您可以迭代您拥有的数据,对于每个项目,使用数组中的索引获取每种语言的翻译。

let data = {
  "name": ["Hello", "Hola", "Bon Jour"],
  "description": ["This text is in English", "This text is in Spanish", "This text is in French"]
}

const translations = {en: [], es: [], fr: []};
Object.keys(data).forEach( key => {
  translations['en'][key] = data[key][0];
  translations['es'][key] = data[key][1];
  translations['fr'][key] = data[key][2];
});

console.log(translations); //this will output you object ready to be used in 'setTranslation'

这是一个working fiddle with this code .

更新

您可以使用 setTranslation 以更动态的方式重写该硬编码部分

Object.keys(translations).forEach( key => {
  translate.setTranslation(key, translations[key]);
});

因此您可以拥有多种 (1..n) 语言,而无需重复代码。

关于javascript - 动态翻译服务 Ionic 2 Angular 2 ngx-translate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45015505/

相关文章:

javascript - 允许 TR 元素上的 onclick 事件,但阻止复选框中的事件

javascript - 如何使用 css-in-js 在悬停另一个元素时显示 div 元素?

javascript - 为什么在 Angular 2 中导入服务时需要 () ?

angularjs - 从 ng-content 引用组件变量

javascript - event.preventDefault 和 stopPropagation 在拖/放事件中未按预期工作

css - 基于 Angular 中的按钮单击执行不同的动画

javascript - TypeError : $scope. messages.push 不是一个函数

ios - CFBundleDocumentType 在 myproject-Info.plist 文件中不起作用

javascript - 用于文件上传的 Firebase 实时数据库结构

javascript - jQuery + 正则表达式替换文本区域内的 href 和 src 值