AngularJS - $ onChangesの問題

私は、親コンポーネントで定義されたオブジェクトを持ち、最初の子コンポーネントと2番目の子コンポーネントへの片方向バインディングで渡しました。最初の子コンポーネントがオブジェクトを変更します。私はなぜオブジェクトが何か変更されても、第二子コンポーネント$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を発射する方法があるさで、プロジェクトのビルドを持っていますか？

EDIT

$onChangesは、私は、親の配列を定義した場合でも、結合一方向に第一子と第二子に渡す発生しませんし、最初の子に私が何かを押してください。しかし、その場合はオブジェクトが変更されているので、私はまだそれを否定しません。

出典

2017-04-07 Matteo Meil

一方向の使い方には少し誤解があります。オブジェクトのプロパティが変更された場合ではなく、一方向は$ onChangesをトリガします。

完全なオブジェクトではなく、2番目の子の値を直接バインドする必要があります。私はあなたがあまりにも値を直接第二子の値と一方向に直接最初の子で、双方向で動作するはずだと思うアドバイスとして

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修正あり

出典

2017-04-07 18:48:23

AngularJS - $ onChangesの問題

答えて

関連する問題