Question

嘿我试图从控制器以json对象的形式传递一些数据到组件，我使用'＆lt;'的注释并听取$onChanges方法中字段的更改。

但是显然角度感觉只有一个变化，尽管我使用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

通过单向绑定传递的对象通过引用传递。在幕后工作的$ watch不检查对象是否相等，只是引用是相同的。这意味着$ watch永远不会被弄脏，永远不会被改变。要实现对对象的更改，您必须设置一个在组件中设置了objectEquality标志的监视。有关这方面的更多信息可以找到：

https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope http://blog.kwintenp.com/the-onchanges-lifecycle-hook/

Answer 2

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

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

要修复您的示例代码，以确保所有更改都由 $ 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);

与对象angularjs组件绑定的一种方式

2 个答案: