Angularjs和$ locale

问题描述 投票:43回答:11

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

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

localization angularjs
11个回答
15
投票

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

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


0
投票

如果您使用的是webpack和typescript,则可以动态加载语言环境。

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

-1
投票

您还可以使用翻译服务获取浏览器的语言环境,然后使用它来执行您需要的操作。 。 。例如,在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);
        }

    }

31
投票

您可以将所需的语言环境加载到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>

31
投票

我已经建立了一个关注i18n的角度模块。 AngularJS对i18n的支持是相当原始的,如果你想要更多的控制并且更灵活,checkout angular-translate - http://angular-translate.github.io/

让我知道,如果我能帮忙的话!


23
投票

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


23
投票

我努力解决同样的问题,在这里阅读所有答案,并在我的项目中介绍了i18n / l10n。这是我的结果:

所以解决方案是使用两个项目,角度转换和角度动态区域设置。


2
投票

包括此脚本: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

图片来源:Lucas MirelmanntmhDynamicLocale


1
投票

我找到了有趣的东西。它不是有角度的,但它是jquery所以集成应该没问题。我将测试表演并获取信息。

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

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


1
投票

如果要加载浏览器的angularJS本地化,请在项目中安装https://github.com/angular/bower-angular-i18nhttps://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); } } ...

0
投票

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中描述的解决方案,具有一些动态性质。
© www.soinside.com 2019 - 2024. All rights reserved.