本地化不适用于流星中 ion-tab 的标题答案

【问题标题】：localization don't work with ion-tab's title in meteor本地化不适用于流星中 ion-tab 的标题
【发布时间】：2017-01-23 01:25:31
【问题描述】：

我正在使用 Meteor + Angular2 + Ionic

现在我需要将 i18n 添加到我的项目中。在尝试学习 Angular 官方 i18n&l10n 和 angular-translate 之后，由于缺乏对我来说有意义的示例，我放弃了它们。

最后我用了：

meteor npm install angular-localization --save

这个包很简单：每种语言都有一个对应的json文件，里面包含了所有的key和value。 i18n 指令只加载值并设置到元素的内部文本。在尝试设置 ion-tab 的标题之前，我做了一些修改并享受使用它。

我修改后的角度定位中main函数的来源是：

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。但没有效果。

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

非常感谢任何提示。

【问题讨论】：

标签： angularjs meteor ionic-framework internationalization

【解决方案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);
  });
}

想法是在 ion-tab 自身展开后找到一个时机，再次修复文本。

【讨论】：