Javascript AngularJS-与$onChanges有关的问题_Javascript_Html_Angularjs

Javascript AngularJS-与$onChanges有关的问题

javascript html angularjs

Javascript AngularJS-与$onChanges有关的问题,javascript,html,angularjs,Javascript,Html,Angularjs,我在父组件中定义了一个对象，并以单向绑定的方式传递给第一个子组件和第二个子组件。第一个子组件在对象中进行更改。我无法理解为什么在第二个子组件$onChanges中，即使对象已更改了某些内容，也不会触发我有一个与此片段相同的项目构建（完整性请链接到）角度模块（'test'，[]） .组件（'父'{ 模板：“\ \ ", 控制器：函数（）{ this.obj={value:0}；这是.$onInit=function（）{} }, controllerAs:'vm'，绑定：{} }) .c

我在父组件中定义了一个对象，并以单向绑定的方式传递给第一个子组件和第二个子组件。第一个子组件在对象中进行更改。我无法理解为什么在第二个子组件

$onChanges

中，即使对象已更改了某些内容，也不会触发

我有一个与此片段相同的项目构建（完整性请链接到）

角度模块（'test'，[]） .组件（'父'{ 模板：“\ \ ", 控制器：函数（）{ this.obj={value:0}；这是.$onInit=function（）{} }, controllerAs:'vm'，绑定：{} }) .component（'firstChild'{ 模板：“+\ -\ ", 控制器：函数（）{ this.plus=函数（）{ this.bind.value++； } this.减号=函数（）{ 这个.bind.value--； } 这是.$onInit=function（）{} 此.$onChanges=函数（obj）{ log（'first-child changed one-way bindings'，obj） } }, controllerAs:'vm'，绑定：{

bind:“您对单向绑定的用法有点误解

如果对象发生更改，单向绑定将触发

$onChanges

，但如果对象的属性发生更改，则不会触发

必须直接绑定到

secondChild

中的值，而不是完整对象

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

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