javascript - 与对象 angularjs 组件绑定(bind)的一种方式

Question

嘿，我正在尝试从 Controller 以 json 对象的形式传递一些数据对于组件，我使用“<”注释并监听 $onChanges 方法中字段的更改。

但显然， Angular 感知只有一个变化，尽管我使用 interval 每 2 秒更新一次字段(当前组件的数据字段)。我尝试使用“=”注释，但无法使用 $onChanges 事件监听对象的更改。那么我能做些什么来解决这个问题呢？也许我正在做一些不正确的事情。

var app = angular.module("app",[]);
app.component('heroDetail', {
  template: '<span>Name</span>',
  controller: HeroDetailController,
  bindings: {
    data: '<'
  }
});

function HeroDetailController(){
  this.$onChanges = function(changes){
    console.log("changes",changes);
  }
}

app.controller('mainController',function($scope,$interval){
    trendData = {
        Load: [],
        AVGTemperature: [],
        IR: [],
        Acoustic: []
    }
  $interval(function () {
        for (var key in trendData) {
            trendData[key] = [];
            trendData[key].push((new Date()).getTime());
            trendData[key].push(Math.round(Math.random() * 100));
        }
        console.log("$scope.trendData",$scope.trendData)
        $scope.trendData = trendData;
    }, 2000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="mainController">
  <hero-detail data="trendData"></hero-detail>
</div>

Answer 1

在组件架构中，在组件之间传递数据的常见方式是不改变数据，但始终使用新引用创建新的复制结构。这是监视应用程序中数据流的唯一方法，因为检查某些内容是否发生更改的最简单、最有效的方法是仅检查引用，而不深入检查对象中的每个属性，而这正是组件生命周期正在做的事情。

我必须提到，变异对象将刷新子对象的范围，但不会作为组件生命周期的变化进行监视。因此摘要循环会看到对象的变化，但组件生命周期不会捕获这些变化。

为了修复您的示例代码以确保所有更改都由 $onChanges 监控，我们需要在每次更改时创建新的数组副本。看看:

$interval(function () {

    var trendData=$scope.trendData.slice(); //create copy of array
    for (var key in trendData) {
        trendData[key] = [];
        trendData[key].push((new Date()).getTime());
        trendData[key].push(Math.round(Math.random() * 100));
    }
    $scope.trendData = trendData; //we are setting new reference to copied array
}, 2000);