angularjs綁定的有效方式 - 整個對象與單個值

我有一個組件和一個子組件。子組件處理一些數據並將數據發送給父組件。angularjs綁定的有效方式 - 整個對象與單個值

所以我的流程是這樣的：

component('parentComponent', { 
    controller: function() { 
     vm.onSubcomponentValueChange = function (obj) { 
      // convert data into some other format, lets say for example 
      vm.objAPIFormat = []; 
      for (value in obj.somevalue1) { 
       vm.objAPIFormat.push({ 
        'somevalue1': value 
        'somevalue2': obj.somevalue2, 
        'somevalue3': obj.somevalue3 
       }); 
      } 
     } 

     vm.onFormSubmit = function() { 
      // make an API call with some complex format of obj 
      // API call in service with vm.objAPIFormat 
     } 
    } 
} 

component('subComponent', { 
    bindings: { 
     inputObject: '<', 
     onInputObjectChange: '&' 
    } 
    controller: function() { 
     vm.$onChange = function (changes) { 
      if (changes.inputObject) { 
       vm.obj = changes.inputObject.currentValue; 
      } 
     } 

     //some complex logic with vm.obj.somevalue1 = [] 
     //some complex logic with vm.obj.somevalue2 = '' 
     //some complex logic with vm.obj.somevalue3 = '' 

     vm.onSubcomponentChange= function() { 
      vm.onInputObjectChange(vm.obj); 
     } 
    } 
}

現在的問題是，這是一種有效的方法？

將inputObject作爲單個對象傳遞給子組件？或將對象拆分爲單獨的綁定？像：

bindings: { 
    somevalue1: '<', 
    somevalue2: '<', 
    somevalue3: '<' 
    onSomeValue1Change: '&' 
    onSomeValue2Change: '&' 
    onSomeValue3Change: '&' 
}

來源

2017-08-05 user1741722

如果綁定具有多個屬性的一個對象，子組件不會觸發$onChanges事件時該對象變化的屬性。只有當對象的引用發生更改（或值爲值類型的情況下）時，纔會調用$onChanges處理程序。

因此，如果您依賴單獨處理屬性更改，則必須單獨綁定它們，否則必須將自己的觀察器添加到子組件中的屬性中。後一種選擇甚至可以節省效率，因爲只有一種綁定 - 或者甚至可能使其稍微變差。另外，如果在任何一點你在DOM中只有這些組件的幾個實例（甚至只有一個），那麼你就不必在優化你的組件綁定數量上花太多時間。

來源

2017-08-05 20:58:44

請注意，當對象更改時，單向綁定僅觸發$onChange函數。如果該指令需要做的事情時，內容的對象改變，平等檢查需求將在$doCheck函數來完成：

component('subComponent', { 
    bindings: { 
     inputObject: '<', 
     onInputObjectChange: '&' 
    } 
    controller: function() { 
     var vm = this; 
     vm.$onChange = function (changes) { 
      if (changes.inputObject) { 
       vm.obj = changes.inputObject.currentValue; 
      } 
     }; 

     vm.$doCheck = function() { 
      var oldValue; 
      if (!angular.equals(vm.inputObject, oldValue) { 
       oldValue = vm.inputObject; 

       //code to update directive 

      }; 
     };  
    } 
}

欲瞭解更多信息，請參閱

來源

2017-08-05 22:02:58 georgeawg

angularjs綁定的有效方式 - 整個對象與單個值

回答

相關問題