Question

嘿，我有一个有两个绑定值的组件：load＆amp;最大。我使用值初始化$ onInit方法中的load和max：

加载：0 最大：300。

然后我使用$ onChange循环更改了组件的值，需要将load的值更新为100。

但是这不会发生，我只获取在$ onInit中设置的初始值，而不是在$ onChanges中设置的最后一个值。我可以看到使用console.log，该值已更新，但我无法在UI（组件模板）上看到它。

有人可以向我解释问题是什么以及如何解决？

以下是我要说的代码： http://codepen.io/Barak/pen/JEVWbO

<div ng-app="app" ng-controller="mainCTRL">
  <load load="loadData" max="maxData"></load>
</div>

var app = angular.module("app",[]);

app.controller("mainCTRL",function($scope){
  $scope.loadData = 100;
  $scope.maxData  = 500;
})
app.component("load",{
    template:'<div><span>{{$ctrl.load}}</span> <span>{{$ctrl.max}}</span></div>',
    controller: loadController,
    bindings: {
        load: '<',
        max: '<'
    }
})

function loadController(){
  var self = this;
  self.$onInit  = function(){
    self.load = 0;
    self.max = 300;
  }

  self.$onChanges = function(changes){
    self.load = changes.load.currentValue;
    console.log('onChanges self.load',self.load);
   }

}

Answer 1

在初始化所有绑定后调用

$onInit()。这意味着在您的$onInit方法中，self.load已设置为100并且您用0覆盖它。尝试：

  self.$onInit  = function(){
    self.load = self.load || 0;
    self.max = self.max || 300;
  }

另一个有趣的事情是：$onChanges之前调用$onInit。这是一个讨论why。

$ onChanges不会更新组件初始化的值

1 个答案: