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

Question

嘿，我有一个组件，它有两个绑定(bind)值:负载和最大值。 我使用值初始化 $onInit 方法中的负载和最大值:

负载: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() 在所有绑定(bind)初始化后调用。这意味着在您的 $onInit 方法中，self.load 已设置为 100，并且您用 0 覆盖它。尝试:

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

还有一件更有趣的事情:$onChanges 在 $onInit 之前调用。这是一个讨论why 。