兩種方式的數據綁定不會觸發組件中的$ onChanges

Question

組件之間的兩種方式的數據綁定不更新

我正在使用兩種方式的數據綁定設置組件間通信。 我有一個父控制器，該控制器從AJAX調用中獲取數據並將該數據發送到2個組件。

我試圖修改傳遞給組件的數據，但是如果child1組件更新了數據，盡管存在兩種方式的數據綁定，子組件也無法獲取更新數據。 我讀到$ onChanges鈎子不會捕獲雙向數據綁定的change事件。

<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生命周期掛鈎僅在單向（ "<" ）和屬性（ "@" ）綁定更改時觸發。 它不會觸發雙向（ "=" ）綁定的更改。

對於組件，對輸入使用單向（ "<" ）綁定，對輸出使用表達式（ "&" ）綁定：

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開發人員指南-基於組件的應用程序體系結構》 。

也要注意以data開頭的綁定。 指令規范化將刪除以data-開頭的名稱。 請參閱《 AngularJS開發人員指南-指令規范化》 。

---

執行XHR的函數無法返回數據。 他們只能返回需要從中提取數據的承諾。

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的思考方式。