如何最佳地组织角度翻译中的翻译字符串？

Question

我在相当大的Angular项目上使用angular-translate。我将项目分为多个模块以使其更易于管理，但是无法分解每个模块的翻译字符串。

例如，我有模块A和B，其中B是A的子模块。有一些与模块A覆盖的HTML有关的字符串，它们位于’/json/localization/A/en.json’中。同样，我在’/json/localization/B/en.json’中放置了与B有关的字符串。首先，我使用angular-
translate的$ translationProvider将B的en.json加载到模块B中。然后，我也使用$
translationProvider加载模块A的en.json。问题在于，加载A的字符串会覆盖B的字符串，并且它们会丢失。

使用angular-translate，有没有一种方法可以加载每个模块的字符串而不进行覆盖，或者父模块是否必须从单个en.json加载所有字符串？

这是我如何加载翻译字符串的示例（在coffeescript中）：

my_module.config(['$translateProvider', ($translateProvider) ->
  $translateProvider.useStaticFilesLoader
    prefix: '/json/localization/A/'
    suffix: '.json'

  $translateProvider.preferredLanguage 'en'
])

Answer 1

angular-
translate支持异步加载部分语言文件。所有部分都将每种语言合并为一个词典。官方文档可以在这里找到：http : //angular-
translate.github.io/docs/#/guide/12_asynchronous-loading

它支持为指向模块化语言文件的url模板应用模板：

$translateProvider.useLoader('$translatePartialLoader', {  
  urlTemplate: '/i18n/{part}/{lang}.json'
});

在控制器内部，您可以添加语言模块并刷新数据绑定，如下所示：

angular.module('contact')
  .controller('ContactCtrl',
    function ($scope, $translatePartialLoader, $translate) {  
      $translatePartialLoader.addPart('contact');
      $translate.refresh();
    });

当然，也可以在路线的解析阶段中涵盖部分加载

另外，您也可以考虑构建自己的自定义加载器功能。http://angular-
translate.github.io/docs/#/guide/13_custom-loaders

这提供了将所需的语言模块结合在一起的全部灵活性。例如，您可以执行以下操作：

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