我可以手动为某些应用程序设置$ locale吗?
是否有可能只支持本地人的方法是在角度库中包含当前语言环境的本地化文件。如果有多种文化怎么办?在那种情况下,我必须动态加载本地化文件?我错过了什么?
老实说,角度的$ locale服务仍然非常原始。这真的很好,但似乎在这方面缺乏灵活性。最大的问题是,即使您通过动态重新加载正确的语言环境文件来切换语言环境,日期过滤器之类的东西也不会知道您已经更改了它,因为它们在设置时会注册其语言环境信息。因此,您目前有几个选择:1。使用选定的区域设置重新加载页面...或2.编写您自己的区域设置提供程序和使用它的过滤器。
有可能创建一个服务,动态加载正确的脚本文件,重新初始化所有受影响的过滤器和服务,然后刷新视图,但我不确定在这一点上会涉及到什么。
如果您使用的是webpack和typescript,则可以动态加载语言环境。
export const loadLocale = function(lng){
if(lng != 'en'){
require('./angular-locale_' + lng + '.js');
}
};
您还可以使用翻译服务获取浏览器的语言环境,然后使用它来执行您需要的操作。 。 。例如,在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);
}
}
您可以将所需的语言环境加载到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>
我已经建立了一个关注i18n的角度模块。 AngularJS对i18n的支持是相当原始的,如果你想要更多的控制并且更灵活,checkout angular-translate - http://angular-translate.github.io/
让我知道,如果我能帮忙的话!
对于今天寻找动态本地化的人来说,angular-dynamic-locale做得很好。
我努力解决同样的问题,在这里阅读所有答案,并在我的项目中介绍了i18n / l10n。这是我的结果:
所以解决方案是使用两个项目,角度转换和角度动态区域设置。
包括此脚本:https://github.com/lgalfaso/angular-dynamic-locale/blob/master/src/tmhDynamicLocale.js允许在运行时设置区域设置。
/assets/js/locales/filename-LOCALE.js
- 注意:你在文件名中写为LOCALE的内容很重要 - 任何所需的语言环境都会动态下载。tmhDynamicLocale
作为'tmh.DynamicLocale'
,例如var app = angular.module('app',['tmh.DynamicLocale'])
;tmhDynamicLocaleProvider
”并设置区域设置文件的位置,例如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
图片来源:Lucas Mirelmann为tmhDynamicLocale
。
我找到了有趣的东西。它不是有角度的,但它是jquery所以集成应该没问题。我将测试表演并获取信息。
如果要加载浏览器的angularJS本地化,请在项目中安装https://github.com/angular/bower-angular-i18n和https://github.com/lgalfaso/angular-dynamic-locale。
阅读要安装的每个库的文档。这是我的Ionic项目的一个例子:
...
<!-- angular-dynamic-locale-->
<script src="lib/angular-dynamic-locale/tmhDynamicLocale.min.js"></script>
...
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);
}
}
...
Angular为i18n / l10n提供了很大的支持。你可以找到指南here
我们的应用程序的要求决定了我们如何实现这种支持。
你可以在我以前的一个答案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]);