Angular Translate - 如何检索动态变量列表答案

【问题标题】：Angular Translate - how to retrieve dynamic variable listAngular Translate - 如何检索动态变量列表
【发布时间】：2015-10-04 17:30:53
【问题描述】：

我在翻译 json 文件中有这个：

{ 
  "test_key" : "Var1: {{var1}} Var2: {{var2}} Var3: {{var3}}" 
}

为此，我需要提供 var1、var2 和 var 3。例如：

$translate('test_key', { var1: 1, var2: 2, var3: 3 });

现在的问题是 var1、var2、var3 可以是任何动态变量。我现在需要的是获取所有动态变量列表，以便我可以提供它可能需要的任何值。

理想情况下，这是我想要达到的目标（伪代码）

var dynamicVars = getDynamicVarList(); // I need this, but how? 
dynamicVars.forEach(function (key) {
    switch (key) {
        case "var1":
            return 1;

        case "var2":
            return 2;

        case "var3":
            return 3;

        default:
            return null;
    }
});

【问题讨论】：

标签： angularjs translate

【解决方案1】：

如果是Pascal Precht translate，那么你在模块选项中设置JSON文件，在应用程序初始化之前。使用标准机制是不可能的。它提供 JSON，但是当它被加载时，很难改变一些东西，而不改变 angular translate 模块的源代码。如果您想要这样做的原因是有多种语言，那么您可以在 $translate 中设置多种语言代码。另一种解决方案是从服务器加载 JSON，它对 var1、var2、var3 执行操作并因此返回静态 json，但您可以使用命令执行 $http 调用以更改 switch 语句中的变量。它看起来有点语言方法，Java 对此有好处。 Grails 可能是返回 REST 服务的好框架。

【讨论】：

是的，从服务器加载 JSON 是一种选择。但是 Angular-translate 本身已经这样做了，所以额外的 json 检索似乎是多余的。 angular-translate 的缺点是，当使用动态变量时，您必须提前知道变量才能知道要提供哪些值。这是我们遇到的主要问题，因为我们希望首先检索动态变量列表，然后提供值。
我认为您将不得不更改模块或在模块 github 页面中添加此功能。

【解决方案2】：

再次重申问题，问题在于您事先不知道要使用哪些动态变量。

我使用客户插值器解决了这个问题。

所以当你这样做时

{{'testkey'|翻译}}

你的 lang.json 有：

"testkey" :"这是数字 {{variable1}}"

它会得到解决

这是1号

代码：

app.factory('customTranslateInterpolator',
            ["$interpolate",

            function ($interpolate) {
                var $locale;
                var customTranslateInterpolator = {};

                /**
                 * This will be your custom dynamic vars resolution method
                 */
                var resolveExpressions = function (expressions) {
                    var values = {};
                    expressions.forEach(function (key) {
                        values[key] = resolveVariable(key);
                    });
                    return values;
                }

                /**
                 * The actual method for key:value mapping
                 */
                var resolveVariable = function(key) {
                    var retVal;

                    switch (key) {
                        case "variable1":
                            retVal = 1;
                            break;

                        default:
                            retVal = "";
                    }

                    return retVal;
                }

                customTranslateInterpolator.setLocale = function (locale) {
                    $locale = locale;
                }
                customTranslateInterpolator.getInterpolationIdentifier = function () {
                    return 'custom';
                },

                /**
                 * Custom interpolate
                 * interpolateParams will overwrite resolve expressions. This will allow developers
                 * to pass values to the translate directives or by using $translate service.
                 * 
                 * @param {string} string the string retrieved from the language json file
                 * @param {object} interpolateParams the {key:value} object passed to the angular-translate features.
                 */
                customTranslateInterpolator.interpolate = function (string, interpolateParams) {
                    var result;
                    interpolateParams = interpolateParams || {
                    };

                    // Retrieve expressions and resolve them
                    var interpolatedString = $interpolate(string);
                    var resolvedExpressions = resolveExpressions(interpolatedString.expressions);

                    // Merge interpolateParams onto resolvedExpressions so that interpolateParams overwrites resolvedExpressions
                    angular.extend(resolvedExpressions, interpolateParams);

                    result = interpolatedString(resolvedExpressions);
                    return result;
                }
                return customTranslateInterpolator;
            }]);

确保让 angular-translate 知道您正在使用自定义插值器

$translateProvider.useInterpolation('customTranslateInterpolator');

请注意，您仍然可以提供自己的翻译值，这将覆盖您在 resolveVariable() 中的任何内容

如果你这样做了

{{'testkey' |翻译：“{variable1:'2'}”}}

它会解决

这是2号

希望这对其他人有所帮助。

-幸运男。

【讨论】：