javascript - 通过引用传递对象时，不会触发$ OnChange

嘿，我有以下示例说明了我面临的更大范围的问题。

在我的示例中，有2个组件：“父组件”和“子组件”。
我在子组件和父组件中都存在一个规则字段。
父组件使用绑定（“
子级始终获取规则的更新值，问题是当我使用timeout（$ timeout）将新数据设置为当前规则字段时，不会触发onChanges事件。

除了在超时过程中按引用传递对象（演示ajax调用）时不会触发onChanges事件外，所有工作均按预期进行。

有人可以向我解释为什么会发生这种行为，以及在我更改对象时如何强制onchanges事件着火。

这是我的用例示例：

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

app.component("parent",{
  template:`ParentCmp-{{$ctrl.rules}}
            child- <child rules="$ctrl.rules"></child>`,
  controller:['$timeout',function($timeout){
    this.$onInit= function(){
      this.rules = { name: "Rule1" , Description: "Description" } ;
      this.updatedRules = { name: "UpdateRule1" , Description: "Update Description" }
      var self = this;
     $timeout(function(){
            self.rules = self.updatedRules;
            console.log("update rules",self.rules);
    },3000);
    }
  }]
});

app.component("child",{
  template:"childCmp-{{$ctrl.rules}}",
  bindings:{
    rules: '<'
  },
  controller:['$timeout',function($timeout){
    this.$onInit= function(){
      //this.rules = {};
    }
    this.$onChange = function(changes){
      console.log("onchange event",changes);
    }
  }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="app">

  <parent></parent>

</div>

最佳答案

拼写错误，应在$onChanges组件中为$onChange而不是child

this.$onChanges = function(changes){
      console.log("onchange event",changes);
    }

工作Plunker

关于javascript - 通过引用传递对象时，不会触发$ OnChange，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43031205/