Двухстороннее связывание данных не вызывает $ onChanges в компонентах - PullRequest
Новая
       44

Двухстороннее связывание данных не вызывает $ onChanges в компонентах

0 голосов
/ 26 марта 2019

Двухсторонние привязки данных не обновляются между компонентами

Я настраиваю межкомпонентную связь, используя двустороннюю привязку данных.У меня есть один родительский контроллер, который извлекает данные из вызова AJAX и отправляет эти данные двум компонентам.

Я попытался изменить данные, передаваемые компонентам, но если компонент 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 Component: 

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

Я ожидаю получить обновленные данные в компоненте child1, если компонент child2 изменил данные и наоборот.

1 Ответ

1 голос
/ 26 марта 2019

Хук жизненного цикла 1002 * срабатывает только при изменениях односторонних ("<") и привязок атрибутов ("@"). Он не срабатывает при изменении двусторонних ("=") привязок.

Для компонентов используйте одностороннюю ("<") привязку для входов и привязку выражения ("&") для выходов: 

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.

...