如何在 angular-translate 中最好地组织翻译字符串? [英] How to best organize translation strings in angular-translate?
问题描述
我在一个相当大的 Angular 项目中使用 angular-translate.我将项目分解为多个模块以使其更易于管理,但我无法分解每个模块的翻译字符串.
I am using angular-translate on a rather large Angular project. I am breaking the project into multiple modules to make it more manageable, but I am unable to break up my translation strings per module.
例如,我有模块 A 和 B,其中 B 是 A 的子模块.有一些字符串与模块 A 覆盖的 HTML 相关,它们被放置在 '/json/localization/A/en.json'.同样,我将与 B 相关的字符串放在/json/localization/B/en.json"中.首先,我使用 angular-translate 的 $translationProvider 在模块 B 中加载 B 的 en.json.然后我加载模块 A 的 en.json,也使用 $translationProvider.问题是加载 A 的字符串会覆盖 B 的字符串并且它们丢失了.
For example, I have modules A and B, where B is a submodule of A. There are strings that pertain to the HTML covered by module A, which are placed in '/json/localization/A/en.json'. Likewise, there are strings pertaining to B that I place in '/json/localization/B/en.json'. First I load B's en.json in module B using angular-translate's $translationProvider. Then I load module A's en.json, also using $translationProvider. The problem is that loading A's strings overrides B's strings and they are lost.
使用 angular-translate,有没有办法在不覆盖的情况下为每个模块加载字符串,或者父模块是否必须从单个 en.json 加载所有字符串?
Using angular-translate, is there a way to load strings per module, without overriding, or does the parent module have to load all of the strings from a single en.json?
以下是我如何加载翻译字符串的示例(在 coffeescript 中):
Here is an example (in coffeescript) of how I am loading the translation strings:
my_module.config(['$translateProvider', ($translateProvider) ->
$translateProvider.useStaticFilesLoader
prefix: '/json/localization/A/'
suffix: '.json'
$translateProvider.preferredLanguage 'en'
])
推荐答案
angular-translate 支持异步加载部分语言文件.每种语言的所有部分都合并到一个字典中.官方文档可以在这里找到:http://angular-translate.github.io/docs/#/guide/12_asynchronous-loading
angular-translate supports async loading of partial language files. All partials are merged into one dictionary per language. The official documentation can be found here: http://angular-translate.github.io/docs/#/guide/12_asynchronous-loading
它支持为指向模块化语言文件的 url 模板应用模板:
It supports applying a template for url templates that point to the modularised language files:
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: '/i18n/{part}/{lang}.json'
});
在您的控制器中,您可以添加语言模块并刷新数据绑定,如下所示:
From within your controllers, you can add language modules and refresh the data bindings like this:
angular.module('contact')
.controller('ContactCtrl',
function ($scope, $translatePartialLoader, $translate) {
$translatePartialLoader.addPart('contact');
$translate.refresh();
});
当然,加载部分也可以包含在路由的解析阶段
Of course, loading the partials can also be covered in a route's resolve phase
或者,您也可以考虑构建自己的自定义加载器函数.http://angular-translate.github.io/docs/#/guide/13_custom-loaders
Alternatively, you can also look into building your own custom loader function. http://angular-translate.github.io/docs/#/guide/13_custom-loaders
这提供了您一次性组合所需语言模块所需的所有灵活性.例如.你可以这样做:
This provides all the flexibility you need to combine required language modules in one shot. E.g. you could do something like this:
app.factory('customLoader', function ($http, $q) {
// return loaderFn
return function (options) {
var deferred = $q.defer();
var data = {
'TEXT': 'Fooooo'
};
$http.get('nls/moduleA/en.json').success(function(moduleA){
angular.extend(data, moduleA);
$http.get('nls/moduleB/en.json').success(function(moduleB){
angular.extend(data, moduleB);
deferred.resolve(data);
});
});
return deferred.promise;
};
});
这篇关于如何在 angular-translate 中最好地组织翻译字符串?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!