localization - Angularjs 和 $locale

Question

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

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

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 的角度模块。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服务，您可以在允许服务注入的不同地方设置区域设置，例如控制器，但请记住，服务是单例的，并且在控制器中设置区域设置将在整个应用程序中设置它。

您现在应该运行正确的语言环境。有关更多信息，请使用自述文件tmhDynamicLocale：https ://github.com/lgalfaso/angular-dynamic-locale/blob/master/README.md

信用：卢卡斯米雷尔曼 为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 提供了很好的支持。你可以在这里找到指南

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

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

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

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

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

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

3. 如果我们想要动态区域设置，那么您需要使用新的区域设置重新加载浏览器，方法是将其保存到本地存储中才能生效。您可以使用 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);
        }

    }