如何使用 i18next 和 Angular 遍历国际化的 JSON 数组

Question

我有一系列 json 国际化文件，其中包含基本字符串、字符串数组和 json 对象数组，我一直试图在 angular 中显示它们使用各种 i18n 库。 en_GB 文件在下面

{
  "key": "value en_GB",
    "headings": ["header1 en_GB", "header2 en_GB", "header3 en_GB"],
    "objects": [
        {"title": "title1 en_GB", "subject": "subject1 en_GB"},
        {"title": "title2 en_GB", "subject": "subject2 en_GB"},
        {"title": "title3 en_GB", "subject": "subject3 en_GB"}
    ]
}

我试过 angular-translate - https://angular-translate.github.io/ - 但它不支持数组。解决方法是 return 一个字符串，用定界符分隔，然后对该字符串调用 split() 。但是，它根本不支持 returning JSON 个对象

目前我正在检查 ng-i18next - https://github.com/i18next/ng-i18next - 一个使用 i18next 库的 angular 模块，它非常接近我需要的。

字符串数组由换行符分隔 - "\n" - 所以我对该字符进行拆分以遍历数组，但我仍然遇到与 JSON 对象数组相同的问题。我可以使用索引在数组中显示特定索引 - 例如objects.0.title，但我无法使用 ng-repeat 进行迭代。

我在这里设置了一个 plunker 来演示这一点 - http://plnkr.co/gTuHDZRK0j2fJkw5PBsG 任何人都可以建议一种遍历 "objects" 数组中的对象的方法吗？

Answer 1

我使用 angular-translate 解决了这个问题，并使用了与代码库中的 "Load Static Files" 演示类似的解决方案 - https://github.com/angular-translate/angular-translate/blob/master/demo/ex7_load_static_files.htm

我将对象数组转换为

{
  "key": "value en_GB",
    "headings": ["header1 en_GB", "header2 en_GB", "header3 en_GB"],
    "objects": {
        "one": {"title": "title1 en_GB", "subject": "subject1 en_GB"},
        "two": {"title": "title2 en_GB", "subject": "subject2 en_GB"},
        "three": {"title": "title3 en_GB", "subject": "subject3 en_GB"}
    }
}

在控制器中，我将键添加到一个数组，并将它们的翻译分配给 $scope 中的一个数组，我可以在部分 HTML 文件中使用 ng-repeat 对其进行迭代

var keys = ["one", "two", "three"];
$scope.objects = []
angular.forEach(keys, function(value, key) {
    var object = {};
    $translate("objects." + key + ".title").then(function(translation) {
         object.title = translation;
    }
    $translate("objects." + key + ".subject").then(function(translation) {
         object.subject = translation;
    }
    this.push(object);
}, $scope.objects);


<div ng-repeat="object in objects">{{object.title}} {{object.subject}}</div>

这样做的缺点是我添加到 "objects" 数组的任何新 JSON 对象都不会被自动拾取，它的属性名称必须添加到 "keys"数组以在屏幕上显示它。

Answer 2

您的回答部分正确。我需要修复一些错误才能编译代码。

第一个问题是你控制器上的$translate。查看代码以正确翻译您的示例：

.controller('MainCtrl', function ($scope, $translate) {
  var keys = ["one", "two", "three"];
  $scope.objects = []
  angular.forEach(keys, function(value, key) {
    var object = {};
    $translate("objects." + value + ".title").then(function(translation) {
       object.title = translation;
    });
    $translate("objects." + value + ".subject").then(function(translation) {
       object.subject = translation;
    });
    this.push(object);
 }, $scope.objects);
});

在我的 app.js 中，我像这样配置了 $translateProvider：

$translateProvider.useStaticFilesLoader({
prefix: '/languages/',
suffix: '.json'
});
var language = navigator.language.split('-')[0]; //some bugs here
$translateProvider.preferredLanguage(language);

我尝试了不同的语言环境 json 并且有效。

如何使用 i18next 和 Angular 遍历国际化的 JSON 数组

How to iterate through an internationalised JSON array using i18next and Angular

angularjs

internationalization

i18next