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

Posted 2023-02-19

【中文标题】如何最好地组织角度翻译中的翻译字符串？

【英文标题】：How to best organize translation strings in angular-translate?

【发布时间】：2014-09-04 20:32:35

【问题描述】：

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

例如，我有模块 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 的字符串并且它们会丢失。

使用 angular-translate，有没有办法在不覆盖的情况下为每个模块加载字符串，或者父模块是否必须从单个 en.json 加载所有字符串？

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

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

  $translateProvider.preferredLanguage 'en'
])

【参考方案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;  
  ;
);

【讨论】：

您如何使用此解决方案防止 FOUC（未翻译内容的 Flash）？

模块作者已经回答了这个问题in their guide already 大约在页面下方的 3/4。或者，您可以将翻译后的内容添加到路线的“解析”属性中。 ngRouter 和 uiRouter 都支持这个。

如果在生产中（所有缩小的 *.js）useLoader 中指定的 urlTemplate 发生变化，你如何处理它？