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

Question

嘿，我有以下示例，它演示了我在更大范围内遇到的问题。

我的示例中有:2 个组件:父组件和子组件。我有一个规则字段存在于子组件和父组件中。父组件使用绑定(bind)('<'单向绑定(bind))将此字段(规则字段)发送到他的子组件。

子项始终获取规则的更新值，问题是当我使用 timeout($timeout) 将新数据设置到当前规则字段时，onChanges 事件不会触发。

一切都按预期工作，除了在超时过程中通过引用传递对象时 onChanges 事件不会触发(这演示了 ajax 调用)。

有人可以解释一下为什么会发生这种行为，以及如何在更改对象时强制 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>

Answer 1

打错字了，应该是$onChanges而不是 child 组件中的 $onChange

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

工作中Plunker