javascript - AngularJS 在 lang 更改时更改语言环境文件

Question

我们有一个支持多语言的 angularJS 应用程序。

在我们的主应用模块中，我们定义了:

.config(function ($translateProvider, $translatePartialLoaderProvider) {
    $translateProvider.useLoader("$translatePartialLoader", {
        urlTemplate: "/js/app/i18n/{lang}.json"
    });
    $translateProvider
    .registerAvailableLanguageKeys(['en', 'fr'], {
        'en_US': 'en',
        'en_UK': 'en',
        'en_CA': 'en',
        'fr_FR': 'fr',
        'fr_CA': 'fr',
        'fr_BE': 'fr',
        '*': 'en'
    })
    .fallbackLanguage('en')
    .determinePreferredLanguage();

在我们的主 Controller 中，我们有一个选择来更改语言，调用这个函数:

this.changeLang = function () {
        $translate.use(self.currentLang).then(function () {
            // Here we want to trigger the call to another angular i8ln file
        }, function () {
            MessageService.show("error", $translate.instant("lang_change_error"));
        });
    };

但是我们想使用 angular i8ln power 来翻译一些数据，例如日期选择器。

我们知道我们必须在加载 Angular 应用程序的 index.html 中加载 angular i8ln 语言环境文件。这些文件包含例如:

'use strict';
angular.module("ngLocale", [], ["$provide", function ($provide) {
    var PLURAL_CATEGORY = { ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other" };
    function getDecimals(n) {
        n = n + '';
        var i = n.indexOf('.');
        return (i == -1) ? 0 : n.length - i - 1;
    }

    function getVF(n, opt_precision) {
        var v = opt_precision;

        if (undefined === v) {
            v = Math.min(getDecimals(n), 3);
        }

        var base = Math.pow(10, v);
        var f = ((n * base) | 0) % base;
        return { v: v, f: f };
    }

    $provide.value("$locale", {
        "DATETIME_FORMATS": {
            "AMPMS": [
              "AM",
              "PM"
            ],
            "DAY": [
              "Sunday",
              "Monday",
              "Tuesday",
              "Wednesday",
              "Thursday",
              "Friday",
              "Saturday"
            ],
            "ERANAMES": [
              "Before Christ",
              "Anno Domini"
            ],
            "ERAS": [
              "BC",
              "AD"
            ],
            "FIRSTDAYOFWEEK": 6,
            "MONTH": [
              "January",
              "February",
              "March",
              "April",
              "May",
              "June",
              "July",
              "August",
              "September",
              "October",
              "November",
              "December"
            ],
            "SHORTDAY": [
              "Sun",
              "Mon",
              "Tue",
              "Wed",
              "Thu",
              "Fri",
              "Sat"
            ],
            "SHORTMONTH": [
              "Jan",
              "Feb",
              "Mar",
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Oct",
              "Nov",
              "Dec"
            ],
            "STANDALONEMONTH": [
              "January",
              "February",
              "March",
              "April",
              "May",
              "June",
              "July",
              "August",
              "September",
              "October",
              "November",
              "December"
            ],
            "WEEKENDRANGE": [
              5,
              6
            ],
            "fullDate": "EEEE, MMMM d, y",
            "longDate": "MMMM d, y",
            "medium": "MMM d, y h:mm:ss a",
            "mediumDate": "MMM d, y",
            "mediumTime": "h:mm:ss a",
            "short": "y-MM-dd h:mm a",
            "shortDate": "y-MM-dd",
            "shortTime": "h:mm a"
        },
        "NUMBER_FORMATS": {
            "CURRENCY_SYM": "$",
            "DECIMAL_SEP": ".",
            "GROUP_SEP": ",",
            "PATTERNS": [
              {
                  "gSize": 3,
                  "lgSize": 3,
                  "maxFrac": 3,
                  "minFrac": 0,
                  "minInt": 1,
                  "negPre": "-",
                  "negSuf": "",
                  "posPre": "",
                  "posSuf": ""
              },
              {
                  "gSize": 3,
                  "lgSize": 3,
                  "maxFrac": 2,
                  "minFrac": 2,
                  "minInt": 1,
                  "negPre": "-\u00a4",
                  "negSuf": "",
                  "posPre": "\u00a4",
                  "posSuf": ""
              }
            ]
        },
        "id": "en",
        "localeID": "en",
        "pluralCat": function (n, opt_precision) { var i = n | 0; var vf = getVF(n, opt_precision); if (i == 1 && vf.v == 0) { return PLURAL_CATEGORY.ONE; } return PLURAL_CATEGORY.OTHER; }
    });
}]);

但是如何根据当前加载的语言加载 i8ln 文件呢？

我试图改变 <script>使用 ng-if 的 src技巧或字符串插值，但它是禁止的，以防止 XSS 注入(inject)。

感谢您的帮助。

Answer 1

按照 Jack A. 的建议，您可以轻松地使用 angular-dynamic-locale 模块。该模块允许您使用简单的函数“触发”包含语言环境文件。

以下是您可以遵循的步骤:

在你的项目中包含 Angular Dynamic Local 模块

您只需按照 module README 上的步骤操作即可.

尤其不要忘记:

• 在您的模块数组中包含 tmhDynamicLocaleProvider 模块:在您的主 App 模块文件的模块数组中包含 tmhDynamicLocaleProvider 模块: angular.module("yourApp", ["tmh.dynamicLocale", ... ]);

• 在您的主应用模块中更改语言环境位置配置

它应该看起来像:

.config(function ($translateProvider, $translatePartialLoaderProvider) {
    $translateProvider.useLoader("$translatePartialLoader", {
        urlTemplate: "/js/app/i18n/{lang}.json"
    });
    $translateProvider
    .registerAvailableLanguageKeys(['en', 'fr'], {
        'en_US': 'en',
        'en_UK': 'en',
        'en_CA': 'en',
        'fr_FR': 'fr',
        'fr_CA': 'fr',
        'fr_BE': 'fr',
        '*': 'en'
    })
    .fallbackLanguage('en')
    .determinePreferredLanguage();

    // Add these lines to configure path 
    // and set the fallback language the same you defined above
    tmhDynamicLocaleProvider.localeLocationPattern('/base/node_modules/angular-i18n/angular-locale_{{locale}}.js');
    tmhDynamicLocaleProvider.defaultLocale('en');
})

您必须更改 /base/node_modules/angular-i18n/ 以获得适当的路径。还要确保遵守文件命名约定，例如在该目录中包含 angular-locale_en.js 文件。

然后，从您的 Controller ，只需使用适当的语言环境参数调用tmhDynamicLocale.set() 函数。

在您的代码中，它应该如下所示:

this.changeLang = function () {
    $translate.use(self.currentLang).then(function (lang) {
       // This line will trigger the file change
       tmhDynamicLocale.set(lang);
    }, function () {
        MessageService.show("error", $translate.instant("lang_change_error"));
    });
};