Mat*_*eil 4 html javascript angularjs
我在父组件中定义了一个对象，并以单向方式将其传递给第一个子组件和第二个子组件。第一子组件在对象中进行更改。我不明白为什么$onChanges即使对象已更改某些东西，第二个子组件也不会触发。
我在此代码段中有一个项目构建（完整性的链接到JSFiddle）
angular.module('test', [])
.component('parent', {
template: "<first-child bind='vm.obj'></first-child>\
<second-child bind='vm.obj'></second-child>\
",
controller: function(){
this.obj = {value: 0};
this.$onInit = function(){}
},
controllerAs: 'vm',
bindings: {}
})
.component('firstChild', {
template: "<button ng-click='vm.plus()'>+</button>\
<button ng-click='vm.minus()'>-</button>\
",
controller: function(){
this.plus = function(){
this.bind.value++;
}
this.minus = function(){
this.bind.value--;
}
this.$onInit = function(){}
this.$onChanges = function(obj){
console.log('first-child changed one-way bindings', obj)
}
},
controllerAs: 'vm',
bindings: {
bind: '<'
}
})
.component('secondChild', {
template: "<p>{{vm.bind.value}}</p>",
controller: function(){
this.$onInit = function(){}
this.$onChanges = function(obj){
console.log('second-child changed one-way bindings', obj)
}
},
controllerAs: 'vm',
bindings: {
bind: '<'
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="test">
<parent></parent>
</body>所以我的问题是，$onChanges在这种情况下是否有办法解雇？
编辑
$onChanges即使我在父级中定义了一个数组，也不会触发，以单向绑定的方式传递给第一个孩子和第二个孩子，而在第一个孩子中，我推送了一些东西。但是在那种情况下，对象已更改，因此我仍然不了解原因。
您对单向用法有一些误解。如果对象更改，则单向将触发$ onChanges，如果对象的属性更改，则单向触发。
您必须直接将值绑定在第二个子对象中，而不是完整对象中。
这是您的问题的解决方案：
angular.module('test', [])
.component('parent', {
template: " <first-child bind='vm.obj'></first-child>\
<second-child value='vm.obj.value'></second-child>\
",
controller: function(){
this.obj = {value: 0};
this.$onInit = function(){}
},
controllerAs: 'vm',
bindings: {}
})
.component('firstChild', {
template: " <button ng-click='vm.plus()'>+</button>\
<button ng-click='vm.minus()'>-</button>\
",
controller: function(){
this.plus = function(){
this.bind.value++;
}
this.minus = function(){
this.bind.value--;
}
this.$onInit = function(){}
this.$onChanges = function(obj){
console.log('first-child changed one-way bindings', obj)
}
},
controllerAs: 'vm',
bindings: {
bind: '<'
}
})
.component('secondChild', {
template: "<p>{{vm.value}}</p>",
controller: function(){
this.$onInit = function(){}
this.$onChanges = function(obj){
console.log('second-child changed one-way bindings', obj)
}
},
controllerAs: 'vm',
bindings: {
value: '<'
}
})
作为建议，我认为您也应该直接在价值方面与二胎相伴，而在价值方面直接与二胎相伴。
你的小提琴与修正