Question

我在父组件中定义了一个对象，并以单向绑定方式传递给first-child和second-child组件。第一个子组件在对象中进行更改。我无法理解为什么即使对象发生了某些变化，第二子组件f(1,2,1)也不会触发。

我在此代码段中有一个项目构建（为完整性而链接到JSFiddle）

$onChanges

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也不会触发。但是在那种情况下，对象已经改变了，所以我仍然不知道为什么。

Answer 1

您对单向使用有一点误解。如果对象发生更改，单向将触发$ onChanges，而不是对象的属性发生更改。

您必须直接绑定second-child中的值，而不是完整对象。

以下是您问题的解决方案：

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: '<'
  }
})

作为一个建议，我认为你应该直接在价值方面与第一个孩子双向合作，在第二个孩子中直接与价值合作。

带有更正的

Your fiddle

AngularJS - $ onChanges的问题

1 个答案: