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的支持是相当原始的，如果你想要更多的控制并且更灵活，checkout angular-translate - http://angular-translate.github.io/

如果我能提供帮助，请告诉我！

Answer 3

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

Answer 4

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

angular-translate（http://angular-translate.github.io）是本地化内容（自定义字符串）的完美方式。但它确实不翻译角度的日期，货币或数字过滤器。
Angular有一个内置机制来本地化日期，货币或数字 -filters。支持的语言环境的翻译可以在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可以在运行时设置区域设置。

从https://github.com/angular/angular.js/tree/master/src/ngLocale
将区域设置存储在Web服务器上的目录中，例如/assets/js/locales/filename-LOCALE.js - 注意：您在文件名中写为 LOCALE 的内容非常重要 - 所有需要的语言环境都会动态下载。< / LI>
在您的模块中，将tmhDynamicLocale包括为'tmh.DynamicLocale'，例如var app = angular.module('app',['tmh.DynamicLocale']);
在您的配置中，传递提供商，即＆＃39; tmhDynamicLocaleProvider＆＃39;并设置区域设置文件的位置，例如tmhLocaleProvider.localeLocationPattern('/assets/js/locales/angular-locale-{{locale}}.js'); {{locale}}将替换为您在运行时设置的区域设置。
要在app.run()中的应用中设置区域设置，请传递'tmhDynamicLocale'服务，例如app.run(['tmhDynamicLocale',function(tmhDynamicLocale){}]);
在运行回调中，设置这样的语言环境，tmhDynamicLocale.set('en-gb');。或者，由于tmhDynamicLocale是一项服务，您可以在不同的地方设置区域设置，例如允许服务注入，例如控制器，虽然记住，服务是单例，在控制器中设置区域设置将在整个应用程序中设置它。

您现在应该正在运行正确的区域设置。有关详细信息，请使用自述文件进行tmhDynamicLocale：https://github.com/lgalfaso/angular-dynamic-locale/blob/master/README.md

信用：tmhDynamicLocale {{1}}。

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项目的一个例子：

在我的index.html中：

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

在我的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

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

如果我们的应用程序只需要一个语言环境，或者我们的应用程序的最终用户只属于特定的语言环境，那么我们可以将i18n / l10n的应用程序范围限制为仅该语言环境

你可以在我以前的一个答案here中找到一个很好的解释，说明我们如何能够实现这些目标。

如果我们想要以特定的组件，指令或部件提供其他格式或区域设置，那么我们可以选择一些指令组件甚至是过滤器

您可以找到使用过滤器进行此类实施的示例小提琴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中描述的具有某种动态性质的解决方案。

Answer 10

如果您使用的是webpack和打字稿，则可以动态加载您的语言环境。

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

    }

Angularjs和$ locale

11 个答案: