$onChanges 不会在组件初始化时更新值答案

【问题标题】：$onChanges doesn't update value on initialization of component$onChanges 不会在组件初始化时更新值
【发布时间】：2017-07-05 16:58:56
【问题描述】：

嘿，我有一个组件，它有两个绑定值：负载和最大值。我在 $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);
   }

}

【问题讨论】：

不.. 不是复制粘贴

标签： javascript jquery html angularjs

【解决方案1】：

$onInit() 在所有绑定初始化后调用。这意味着在你的$onInit 方法中，self.load 已经设置为 100，你用 0 覆盖它。试试：

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

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

【讨论】：