Question

嘿，我有以下示例，它展示了我在更大规模上面临的问题。

我的示例中有：2个组件：父组件和子组件。我有一个规则字段，它存在于子组件和父组件中。父组件使用绑定（'＆lt;'单向绑定）将此字段（规则字段）发送到其子组件。

子项始终获取规则的更新值，问题是当我使用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

它的拼写错误。$onChange组件中应该是$onChanges而不是child

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

工作Plunker

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

1 个答案: