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绑定的有效方式 - 整个对象与单个值

回答

相关问题