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();

在我们的主控制器中，我们有一个选择来更改lang，调用此功能：

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幂来翻译一些数据，例如datePickers。

我们知道，我们必须在index.html中加载 Angular I8LN LOCALE文件。这些文件包含：

'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; }
    });
}]);

但是如何根据当前加载Lang加载i8LN文件？

我尝试使用ng-if Trick或字符串插值来更改<script> SRC，但禁止防止XSS注入。

感谢您的帮助。

Answer 1

jack A.建议，您可以轻松地使用Angular-Dynamic-Locale模块。该模块允许您"触发"。包括使用简单函数的语言环境文件。

这是您可以遵循的步骤：

在您的项目上包括角度动态局部模块

您只需要按照模块读数的步骤进行操作。

特别是不要忘记：

• 在您的模块数组中包含tmhDynamicLocaleProvider模块：在您的主应用程序模块中包含模块中的tmhDynamicLocaleProvider模块： angular.module("yourApp", ["tmh.dynamicLocale", ... ]);

  >

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

应该看起来像：

.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文件。

然后，从您的控制器中，只需使用适当的语言环境参数调用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"));
    });
};