两种方式的数据绑定不会触发组件中的 $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();
}

Child1 组件：

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

Child2 组件：

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周期挂钩仅在单向 ( "<") 和属性 ( "@") 绑定发生更改时触发。它不会在双向 ( "=") 绑定发生更改时触发。

\n\n

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

\n\n

app.component(\'child1\',{\n   bindings: {\n       \xcc\xb6d\xcc\xb6a\xcc\xb6t\xcc\xb6a\xcc\xb6 \xcc\xb6:\xcc\xb6 \xcc\xb6\'\xcc\xb6=\xcc\xb6\'\xcc\xb6\n       facts: "<",\n       factsChange: "&", \n   },\n   controller: function(){\n      this.$onChanges = function(changes){\n         if(changes.facts)\n            console.log(\'facts changed\');\n      }\n   }\n});\n

\n\n

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

\n\n

有关更多信息，请参阅AngularJS 开发人员指南 - 基于组件的应用程序架构。

\n\n

还要小心以 开头的绑定data。指令规范化将删除以 开头的名称data-。请参阅AngularJS 开发人员指南 - 指令规范化。

\n\n\n\n

执行 XHR 的函数无法返回数据。它们只能返回需要从中提取数据的承诺。

\n\n

var app = angular.module(\'app\',[]);\napp.controller(\'ParentController\', function($scope, $get){\n   //get data from AJAX call\n   \xcc\xb6t\xcc\xb6h\xcc\xb6i\xcc\xb6s\xcc\xb6.\xcc\xb6d\xcc\xb6a\xcc\xb6t\xcc\xb6a\xcc\xb6 \xcc\xb6=\xcc\xb6 \xcc\xb6g\xcc\xb6e\xcc\xb6t\xcc\xb6D\xcc\xb6a\xcc\xb6t\xcc\xb6a\xcc\xb6F\xcc\xb6r\xcc\xb6o\xcc\xb6m\xcc\xb6A\xcc\xb6j\xcc\xb6a\xcc\xb6x\xcc\xb6C\xcc\xb6a\xcc\xb6l\xcc\xb6l\xcc\xb6(\xcc\xb6)\xcc\xb6;\xcc\xb6\n   var promise = getDataFromAjaxCall();\n   promise.then( response => {\n       this.data = response.data;\n   });\n}\n

\n\n

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

\n