嘿,我有以下示例说明了我面临的更大范围的问题。
在我的示例中,有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/