生命周期钩子

Question

我有一个AngularJS 1.6应用程序，如下所示：

mapper.readValue(ClassLoader.getSystemClassLoader().getResourceAsStream("file.json"), Map::class.java)

我想在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也不会触发。

使用$ watch或者消息可以轻松完成，但我无法找到适当的以组件为中心的方法。

Answer 1

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

来自文档：

生命周期钩子


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


- — AngularJS $compile Service API Reference - Life-cycle hooks

另见AngularJs 1.5 - Component does not support Watchers, what is the work around?

Answer 2

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

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>

有关更多想法，请参阅Share data between AngularJS controllers。我认为https://stackoverflow.com/a/25145593/1927876是最好的答案，因为它是如此陈述且易于推理，而且我的答案就是基于此。

在AngularJS 1.6中传达兄弟组件之间的变化

2 个答案:

生命周期钩子