Question

我正在使用Meteor + Angular2 + Ionic

现在我需要将i18n添加到我的项目中。在尝试学习Angular官方i18n＆amp; l10n和angular-translate后，我放弃了他们，因为缺乏对我有意义的例子。

最后我用过：

meteor npm install angular-localization --save

这个包非常简单：每种语言都有一个包含所有键和值的相应json文件。 i18n指令只是加载值并设置为element的innerText。我做了一些修改并喜欢使用它，直到我尝试设置ion-tab的标题。

修改后角度定位的主要功能来源是：

angular
  .module('i18n')
  .directive('i18n', ['$rootScope', '$i18n', function($rootScope, $i18n) {
     return {
        priority: 100,
        link: function(scope, element, attrs) {

           function applyTabTitle(translation) {
              var tabs = element.parent();

              var idx = tabs.children('ion-tab').index(element);
              var a = tabs.children('a').eq(idx);
              a.children('span.tab-title').text(translation);
           }

           function applyLocal() {
               try {
                  var jsn = JSON.parse(attrs.i18n);
                  for (prop in jsn) {
                     var translation = $i18n(jsn[prop]);

                     if (prop == 'tabtitle') {
                        applyTabTitle(translation);
                     } else {
                        element.attr(prop, translation);
                     }
                 }
             } catch (e) {
                 var translation = $i18n(attrs.i18n);
                 element.text(translation);
             }
         }

         applyLocal();

         $rootScope.$on('i18n.language:change', function () {
            applyLocal();
         });
      }
   }
}]);

如ionTabNav中所定义，ion-tab将扩展为类似

的内容

<ion-tab icon-on="ios-icon-home" href="#/home"></ion-tab>
<a ng-class="tab-item">
   <i class="icon"></i>
   <span class="tab-title" ng-bind-html="title"></span>
</a>

所以，我不能只使用它（主页是语言密钥）：

<ion-tab data-i18n="homepage" ...>..</ion-tab>

因为“element.text（translation）”会破坏扩展。这就是为什么我发明了“applyTabTitle”函数，然后在html中使用以下内容：

<ion-tab data-i18n='{"tabtitle":"profile"}'>..</ion-tab>

但不幸的是，从登录页面“$ state.go（'homepage'）”重定向到主页后，标签的标题仍然是空白，而如果我刷新主页，则标题会正确显示。

我想也许原因是i18n重定向没有在ionTab重定向之前运行。所以我试图将优先级设置为100.但没有效果。

也许我从一开始就走错路。我想说的是这些高度自动化的框架真的很难定制。发展过程如此坎坷。

非常感谢任何提示。

Answer 1

我找到了解决这个问题的方法。不太好但是有效。

只需将applyTabTitle函数更改为以下内容：

function applyTabTitle(translation) {
  var tabs = element.parent();

  var idx = tabs.children('ion-tab').index(element);
  var a = tabs.children('a').eq(idx);
  var txt = applyParams(translation, attrs);
  a.children('span.tab-title').text(txt);
  $rootScope.$on('$ionicView.enter', function() {
    a.children('span.tab-title').text(txt);
  });
}

想法是找到离子标签自身扩展后的时间，再次修复文本。

本地化不适用于流星中的离子标题

1 个答案: