Angularjs 和 $locale

Question

我可以手动为某些应用程序设置 $locale 吗？

是否有可能支持本地化的唯一方法是从 Angular 库中包含当前语言环境的本地化文件。如果有多种文化怎么办？在那种情况下，我必须动态加载本地化文件？我错过了什么？

Answer 1

您可以将所需的语言环境加载到localStorage，然后刷新页面。让下面的脚本加载您需要的 i18n 文件。还不支持即时更改语言环境。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
var locale = JSON.parse(localStorage.getItem('locale'));
if (locale) {
    document.write('<script src="scripts/i18n/angular-locale_'+locale+'.js"><\/script>');
}
</script>

Answer 2

我已经构建了一个处理 i18n 的 Angular 模块。 AngularJS 对 i18n 的支持非常原始，如果你想拥有更多的控制权并且更灵活，请查看 angular-translate - http://angular-translate.github.io/

如果我能帮忙，请告诉我！

Answer 3

对于今天正在寻找动态本地化的任何人angular-dynamic-locale 做得很好。

Answer 4

我在同样的问题上苦苦挣扎，在这里阅读了所有答案，并在我的项目中引入了 i18n/l10n。这是我的结果：

• angular-translate (http://angular-translate.github.io) 是本地化您的内容（自定义字符串）的完美方式。但它确实不翻译 angular 的日期、货币或数字过滤器。
• Angular 有一个内置机制来本地化日期、货币或数字-过滤器。支持的语言环境的翻译可以在这里找到https://github.com/angular/angular.js/tree/master/src/ngLocale，角度指南位于https://docs.angularjs.org/guide/i18n
• angular 内置机制的问题：在运行时更改语言环境并不容易！这就是https://github.com/lgalfaso/angular-dynamic-locale 发挥作用的地方。它允许您在运行时轻松更改语言。

所以解决方案是同时使用两个项目，angular-translate 和 angular-dynamic-locale。

Answer 5

老实说，Angular 中的 $locale 服务仍然非常原始。确实不错，但是在这方面似乎缺乏灵活性。最大的问题是，即使您通过动态重新加载正确的语言环境文件来切换您的语言环境，诸如日期过滤器之类的东西也不会知道您已经更改了它，因为它们在设置时正在注册他们的语言环境信息。因此，您目前有两个选择：1. 使用所选语言环境重新加载页面...或 2. 编写您自己的语言环境提供程序和使用它的过滤器。

可能可以创建一个服务来动态加载正确的脚本文件，重新初始化所有受影响的过滤器和服务，然后刷新视图，但我不确定这会涉及什么此时。

Answer 6

包含此脚本：https://github.com/lgalfaso/angular-dynamic-locale/blob/master/src/tmhDynamicLocale.js 允许在运行时设置语言环境。

1. 从https://github.com/angular/angular.js/tree/master/src/ngLocale下载你想要的所有语言环境
2. 将语言环境存储在 Web 服务器上的目录中，例如/assets/js/locales/filename-LOCALE.js - 注意：您在文件名中写的 LOCALE 很重要 - 所需的任何语言环境都将被动态下载。
3. 在您的模块中，将tmhDynamicLocale 包含为'tmh.DynamicLocale'，例如var app = angular.module('app',['tmh.DynamicLocale']);
4. 在您的配置中，传入提供程序，即“tmhDynamicLocaleProvider”并设置您的语言环境文件的位置，例如tmhLocaleProvider.localeLocationPattern('/assets/js/locales/angular-locale-{{locale}}.js'); {{locale}} 将被替换为您在运行时设置的语言环境。
5. 要在您的应用程序中设置区域设置，在app.run() 中，传入'tmhDynamicLocale' 服务，例如app.run(['tmhDynamicLocale',function(tmhDynamicLocale){}]);
6. 在你的运行回调中，像这样设置语言环境，tmhDynamicLocale.set('en-gb');。或者，由于tmhDynamicLocale 是一项服务，您可以在允许服务注入的不同位置设置区域设置，例如控制器，但请记住，服务是单例的，在控制器中设置区域设置将在整个应用程序中设置它。

您现在应该可以运行正确的语言环境了。如需更多信息，请使用 README 获取tmhDynamicLocale:https://github.com/lgalfaso/angular-dynamic-locale/blob/master/README.md

信用：Lucas Mirelmann 为 tmhDynamicLocale。

Answer 7

我发现了一些有趣的东西。它不是有角度的，但它是 jquery，所以集成应该没问题。 我将测试性能并返回信息。

https://github.com/js-coder/x18n/wiki/Getting-started

https://github.com/js-coder/jQuery.x18n

Answer 8

如果您想加载浏览器的 angularJS 本地化，请在您的项目中安装 https://github.com/angular/bower-angular-i18n 和 https://github.com/lgalfaso/angular-dynamic-locale。

阅读要安装的每个库的文档。这是我的 Ionic 项目的一个示例：

1. 在我的 index.html 中：

   ...
   <!-- angular-dynamic-locale-->
   <script src="lib/angular-dynamic-locale/tmhDynamicLocale.min.js"></script>
   ...
   

2. 在我的 app.js 中

   var app = angular.module('project-name', ['ionic',..., 'tmh.dynamicLocale']);
   ...
   // tmhDynamicLocaleProvider
   app.config(function(tmhDynamicLocaleProvider) {
      //  override the default path (angular/i18n/angular-locale_{{locale}}.js) to the stored Angular i18n locale files
      tmhDynamicLocaleProvider.localeLocationPattern('lib/angular-i18n/angular-locale_{{locale}}.js');
   })
   ...
   app.run(function($rootScope, $ionicPlatform, ..., tmhDynamicLocale){
      // set locale for angular formats   
      var inArray = function(needle, haystack) {
         var key = '';
         for (key in haystack) {
            if (haystack[key] === needle) {
               return true;
            }
         }
         return false;
      };
      var preferredLanguage = navigator.language || navigator.browserLanguage || navigator.systemLanguage || navigator.userLanguage;
      if (typeof preferredLanguage === 'string') {
         var code = preferredLanguage.substring(2, 0);
            if (inArray(code, PROPERTIES.LANGUAGES)) {
               tmhDynamicLocale.set(code);
            }
      }
      ...
   

Answer 9

Angular 为 i18n/l10n 提供了很好的支持。 您可以找到指南here

我们的应用程序的要求决定了我们如何实现这种支持。

1. 如果我们的应用程序只需要一个区域设置，或者我们应用程序的最终用户仅属于特定区域设置，那么我们可以将 i18n/l10n 的应用程序范围限制为仅该区域设置

您可以在我之前的一个答案here 中找到我们如何实现这些目标的一个很好的解释。

1. 如果我们想为特定组件、指令或部分提供服务以其他格式或语言环境显示，那么我们可以使用一些指令组件甚至是过滤器

您可以在here 找到使用过滤器的此类实现的示例小提琴

 function MyController($scope) {
   $scope.property = {
     price: 50000000.557
   }
 }

 function toLocaleCurrencyFilter($filter) {
  return function(amount, currencySymbol, fractionSize, locale) {
    var returnValue = Number(parseFloat(amount)).toLocaleString(locale, {
      minimumFractionDigits: parseInt(fractionSize),
      maximumFractionDigits: parseInt(fractionSize),
    });
    returnValue = returnValue + " " + currencySymbol
    return returnValue;
  };
 }
 angular.module('myApp', [])
   .controller('MyController', ['$scope', MyController])
   .filter('toLocaleCurrency', ['$filter', toLocaleCurrencyFilter]);

1. 如果我们想要动态区域设置，那么您需要使用新的区域设置重新加载浏览器，方法是将其保存到本地存储中才能生效。 您可以使用 1 中描述的具有一些动态特性的解决方案。

Answer 10

如果你使用 webpack 和 typescript，你可以动态加载你的语言环境。

    export const loadLocale = function(lng){
    if(lng != 'en'){
        require('./angular-locale_' + lng + '.js');
    }
};

Answer 11

您还可以使用翻译服务来获取浏览器的语言环境，然后使用它来做您需要的事情。 . .例如，在 ShortDatePipe 中：

   import { Pipe, PipeTransform} from '@angular/core';
    import { formatDate  } from '@angular/common';
    import { TranslateService } from '@ngx-translate/core';

    @Pipe({
      name: 'shortDate'
    })
    export class ShortDatePipe implements PipeTransform {
        constructor(private translateService: TranslateService) { }

        transform(value: string): string {
            var language: string = this.translateService.getBrowserCultureLang();
            console.log(language);
            return (value == "" || value == null) ? "" : formatDate(value, 'shortDate', language);
        }

    }