4
我有一個在父組件中定義的對象,並以單向綁定方式傳遞給第一個子組件和第二個子組件。第一個孩子組件在對象中進行更改。我不明白爲什麼在第二個孩子組件$onChanges
即使對象發生了變化也不會觸發。
我有一個項目構建在這個片段(鏈接到JSFiddle的完整性)
angular.module('test', [])
.component('parent', {
template: "<first-child bind='vm.obj'></first-child>\
<second-child bind='vm.obj'></second-child>\
\t ",
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(){
\t this.bind.value++;
}
this.minus = function(){
\t this.bind.value--;
}
\t \t
this.$onInit = function(){}
\t \t
this.$onChanges = function(obj){
\t \t console.log('first-child changed one-way bindings', obj)
}
},
controllerAs: 'vm',
bindings: {
\t bind: '<'
}
})
.component('secondChild', {
template: "<p>{{vm.bind.value}}</p>",
controller: function(){
\t \t this.$onInit = function(){}
\t \t this.$onChanges = function(obj){
\t \t \t console.log('second-child changed one-way bindings', obj)
\t \t }
},
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
如果定義在父數組甚至不火,傳遞給第一胎和第二胎單向綁定和一孩子,我推的東西。但在這種情況下,對象已經發生了變化,所以我仍然不知道爲什麼。