在 AngularJS 1.6 中传达同级组件之间的更改

Question

我有一个看起来像这样的AngularJS 1.6应用程序：

angular.module('app').component('parent', {
template: '    
<parent>
<display options="ctl.options"></display>
<controls options="ctl.options"></controls>
</parent>',
controller: function() {
this.options = { x: 100, y: 0.2 };
},
controllerAs: 'ctl',
bindToController: true
});

我想使用组件controls输入来修改options对象的属性，以便更改反映在display中(但不会在每次更改一个属性时重写整个对象(。

我该怎么做？即使我在controls中将选项设置为双向绑定，display也不会更新，也不会触发$onChanges。

它可以通过$watch或消息轻松完成，但我无法找到一种适当的以组件为中心的方法来做到这一点。

Answer 1

实现此目的的一种声明性方法是让工厂存储数据，并将工厂传递给每个控制器。当任一控制器/组件更新状态时，它将反映在另一个控制器/组件中。

var app = angular.module('app', []);
app.factory('Options', function(){
return {
data: {
x: 100,
y: 0.2
}
};
});
app.controller('DisplayCtrl', function($scope, Options){
$scope.options = Options.data;
});
app.controller('ControlsCtrl', function($scope, Options){
$scope.options = Options.data;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="DisplayCtrl">
<p>x: {{ options.x }}</p>
<p>y: {{ options.y }}</p>
</div>
<div ng-controller="ControlsCtrl">
<label>
x: <input type="number" ng-model="options.x">
</label>
<label>
y: <input type="number" ng-model="options.y">
</label>
</div>
</div>

请参阅在 AngularJS 控制器之间共享数据以获取更多想法。我认为 https://stackoverflow.com/a/25145593/1927876 是最好的答案，因为它是如此陈述性和易于推理，也是我在这里回答的基础。

Answer 2

$onChanges生命周期挂钩仅在对象标识更改时触发。如果要检查对象内容的更改，请使用$doCheck生命周期挂钩。

从文档中：

生命周期挂钩

• $doCheck()- 在摘要周期的每个回合调用。提供检测更改并采取行动的机会。您希望为响应检测到的更改而采取的任何操作都必须从此挂钩调用;实现这一点对调用$onChanges的时间没有影响。例如，如果您希望执行深度相等性检查或检查Date对象，则此钩子可能很有用，AngularJS的更改检测器不会检测到其更改，因此不会触发$onChanges。调用此钩子时没有参数;如果检测到更改，则必须存储以前的值，以便与当前值进行比较。

-— AngularJS $compile 服务 API 参考 - 生命周期钩子

另请参阅AngularJs 1.5 - 组件不支持观察者，解决方法是什么？