$translate.instant 在组件启动时不转换 AngularJS 组件中的值

Question

使用 Angular Translate and $translate.instant() 方法，我构建了 AngularJS 的 select 组件，可以在语言之间自动切换：

<translated-select
  elements="$ctrl.values"
  current-value="$ctrl.value"
  on-change="$ctrl.setValue(value)"
></translated-select>
{{ $ctrl.value }}
<hr>
<button ng-click="$ctrl.switchToPolish()">
  Switch to polish
</button>
<button ng-click="$ctrl.switchToEnglish()">
  Switch to english
</button>

正如您在 Plunker 上看到的那样：Angular JS select with automated translations。问题是它显示 selects 选项为未定义，直到我选择第二个选项。然后一切正常，我可以在选项的英语和波兰语翻译之间切换。我什至尝试使用 $onChanges 钩子等待第一次更改，如果发生更改运行 $digest 与 $timeout:

this.$onChanges = function (changes) {
  if (changes.elements) {
    $timeout(function () {
      this.values = changes.elements.currentValue;
    }.bind(this));
  }
  if (changes.currentValue) {
    $timeout(function () {
      this.value = changes.currentValue.currentValue;
    }.bind(this));
  }
}

但一次又一次，我必须选择 select 中的第二个选项才能使其正常工作。我错过了什么吗？如果有人能帮助我，我将不胜感激，在此先感谢您。

Answer 1

$translate.instant() 不知道翻译可能未完全加载这一事实。

根据documentation：

Returns a translation instantly from the internal state of loaded translation.

因此，如果您不依赖 $translate.instant()，您还可以使用翻译过滤器（它在内部使用手表），如下所示：

<select ng-model="$ctrl.value"' + 'ng-options="value as (value | translate) for value in $ctrl.values" ' + ' ng-change="$ctrl.onSelect()" ' + '></select>

可在此处找到完整示例：

http://plnkr.co/edit/zmYgiOOVjXCmGprsvOLO?p=preview

Answer 2

考虑尝试 $onInit 而不是 $onChanges。来自文档：

$onInit() - Called on each controller after all the controllers on an element have been constructed and had their bindings initialized (and before the pre & post linking functions for the directives on this element). This is a good place to put initialization code for your controller.

this.$onInit = function() {
  this.values = this.elements;
  this.value = this.currentValue;

  this.onSelect = function() {
    this.onChange({
      value: this.value
    });
  };

  this.translate = function(key) {
    return $translate.instant(key);
  };
};

参见：http://plnkr.co/edit/5T90efhcnaQoEGoLY1gZ?p=preview

$translate.instant 在组件启动时不转换 AngularJS 组件中的值

$translate.instant does not translate values in AngularJS component when component starts

javascript

internationalization

angularjs

angular-translate

angularjs-components