10

我有兴趣使用角度翻译。

由于最初在启动时发生了很多设置调用，我无法在配置期间提供语言 json。也不可能使用异步加载器。我需要能够在稍后从控制器或服务中指定语言。

$translateProvider.translations(.., ...)是使用的调用，但$translateProvider在控制器或服务中不可用，但似乎仅在配置中可用。

$translate似乎没有能力加载语言 JSON。

有什么解决方法吗？

4

5 回答 5

21

首先注入$translate您的控制器。

app.controller('MainCtrl', function($scope, $state, $translate) {});

然后，您可以使用 获取和设置当前语言$translate.use()。

var lang = $translate.use(); // holds current lang
$translate.use(lang);  // sets lang to use

 

如果你需要在配置之后添加新的翻译，那么你可以使用部分加载器。

// config example
app.config(function($translateProvider, $translatePartialLoaderProvider){
  // "known" translations here, in {lang}.main.json, if any
  $translatePartialLoaderProvider.addPart('main'); 
  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: '/path/to/files/{lang}.{part}.json'
  });
});

// controller
app.controller('MainCtrl', function($scope, $translate, $translatePartialLoader){
  $translatePartialLoader.addPart('translation');
  $translate.refresh();
  $translate.use('en');
});

// en.translation.json
{ "KEY" : "Value", ... }

 

如果这还不够动态，那么您可以随时进行即时翻译。

// config
app.config(function($translateProvider, $translatePartialLoaderProvider){
    $translateProvider.preferredLanguage('en');
    $translateProvider.translations('en',{
      'TITLE': '{{ title }}',
      'SUBTITLE': '{{ subtitle }}',
      'STATIC': 'This is static'
    });
});

// controller
app.controller('MainCtrl', function($scope, $translate){
  $scope.dynamic = {
    'title': 'This is my header',
    'subtitle': 'My subtitle'
  };
});

// template
<pre>{{ 'TITLE' | translate:dynamic }}</pre>
<pre>{{ 'SUBTITLE' | translate:dynamic }}</pre>
<pre>{{ 'STATIC' | translate }}</pre>

这会吐出类似的东西

在此处输入图像描述

于 2014-09-11T08:32:49.100 回答
4

最后到了那里。

在 .config 中

$translateProvider.useLoader('customLoader');

自定义加载器...

angular.module('myapp').factory('customLoader', function ($q, TranslationService) {

    return function (options) {
        var deferred = $q.defer();

          deferred.resolve(TranslationService.getLanguages().filter(function(lang){
                return lang.key == options.key
          })[0].values);

        return deferred.promise;
    };

});

然后是 TranslationService 来共享数据

angular.module('myapp').factory('TranslationService', function () {
    var languages = [];

    return {
        setLanguages: function (data) {
            languages = data;
        },

        getLanguages: function () {
            return languages;
        }
    }
});
于 2014-09-11T13:36:30.533 回答
2

也许检查一下：

http://www.ng-newsletter.com/posts/angular-translate.html

在“运行时切换语言”下

$translate.use(); // Returns the currently used language key
$translate.use('en'); // Sets the active language to `en`

app.controller('TranslateController', function($translate, $scope) {
  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
});
于 2014-09-11T08:31:36.497 回答
1

这个有效。storageService 具有本地存储，在本地存储中设置“NG_TRANSLATE_LANG_KEY”后。你可以像下面这样称呼它。

angular.module('myApp').run(['$rootScope', 'StorageService', function($rootScope, StorageService) {
    $rootScope.currentLanguage = StorageService.local.get('NG_TRANSLATE_LANG_KEY') || 'en'; 
}]);


<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="TranslateController" ng-init="changeLanguage(currentLanguage)">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" ng-click="changeLanguage('tr')">TR</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" ng-click="changeLanguage('en')">EN</a></li>
</ul>
于 2014-09-24T14:06:36.830 回答
0

我认为管理动态加载的最佳方法是在解析配置路由器块中，例如

resolve: {
    translatePartialLoader:  function loadPartialLoader($translate,$translatePartialLoader) {
        $translatePartialLoader.addPart('home');
        return $translate.refresh();
    }
}
于 2015-12-20T21:46:41.823 回答