双向数据绑定不会触发组件中的 $onChanges

Question

双向数据绑定未在组件之间更新

我正在使用双向数据绑定设置组件间通信。我有一个父控制器，它从 AJAX 调用中获取数据并将该数据发送到 2 个组件。

我已尝试修改传递给组件的数据，但如果 child1 组件更新数据，则尽管存在双向数据绑定，但子组件不会获取更新数据。我读到 $onChanges 挂钩不会捕获双向数据绑定的更改事件。

<div ng-controller="ParentController as ctrl">
    <child1 data="ctrl.data"></child1>
    <child2 data="ctrl.data"></child>
</div>

父控制器：

var app = angular.module('app',[]);
app.controller('ParentController', function($scope, $get){
   //get data from AJAX call
   this.data = getDataFromAjaxCall();
}

子 1 组件：

app.component('child1',{
   bindings : {
      data : '='
   },
   controller: function($scope){
      var self = this;
      self.$onChanges = function(changes){
         if(changes.data)
            console.log('data changed');
      }
      self.addData = function(){
         self.data.push({
            id : 10,
            name : 'abc'
         });
      }
   }
});

子 2 组件：

app.component('child2',{
   bindings : {
      data : '='
   },
   controller: function($scope){
      var self = this;
      self.$onChanges = function(changes){
         if(changes.data)
            console.log('data changed');
      }
      self.addData = function(){
         self.data.push({
            id : 20,
            name : 'pqr'
         });
      }
   }
});

如果 child2 组件修改了数据，我希望在 child1 组件中获得更新的数据，反之亦然。

Answer 1

$onChanges life-cycle hook 仅在更改单向 ("<") 和属性 ("@") 绑定时触发。它不会触发对双向 ("=") 绑定的更改。

对于组件，对输入使用单向 ("<") 绑定，对输出使用表达式 ("&") 绑定：

app.component('child1',{
   bindings: {
       ̶d̶a̶t̶a̶ ̶:̶ ̶'̶=̶'̶
       facts: "<",
       factsChange: "&", 
   },
   controller: function(){
      this.$onChanges = function(changes){
         if(changes.facts)
            console.log('facts changed');
      }
   }
});

避免使用双向 ("=") 绑定。他们使迁移到 Angular 2+ 变得更加困难。

有关详细信息，请参阅 AngularJS Developer Guide - Component-Based Application Architecture。

还要小心以 data 开头的绑定。指令规范化将去除以 data- 开头的名称。参见 AngularJS Developer Guide - Directive Normalization。

执行 XHR 的函数不能 return 数据。他们只能 return 承诺需要从中提取数据。

var app = angular.module('app',[]);
app.controller('ParentController', function($scope, $get){
   //get data from AJAX call
   ̶t̶h̶i̶s̶.̶d̶a̶t̶a̶ ̶=̶ ̶g̶e̶t̶D̶a̶t̶a̶F̶r̶o̶m̶A̶j̶a̶x̶C̶a̶l̶l̶(̶)̶;̶
   var promise = getDataFromAjaxCall();
   promise.then( response => {
       this.data = response.data;
   });
}

JavaScript 浏览器IO使用单线程非阻塞事件驱动架构。熟悉命令式编程风格的程序员需要改变他们对 JavaScript 浏览器的 IO 的看法。

双向数据绑定不会触发组件中的 $onChanges

Two way data bindings does not trigger $onChanges in Components

angularjs

angularjs-components

angularjs-1.5

双向数据绑定未在组件之间更新