javascript - 如何使用 Angular 组件观察组件绑定(bind)变化

Question

如何监听 Angular 组件绑定(bind)变化并执行操作？

angular.module('myapp')
    .component('myComponent', {
        templateUrl: 'some.html',
        controller: MyController,
        controllerAs: 'myCtrl',
        bindings: {
            items: '<'
        }
    });

现在，当 items 更改时，我想使用该值执行另一个操作，
我该怎么做？

Answer 1

您可以将$onChanges 方法添加到 Controller

$onChanges(changesObj) 在单向绑定(bind)更新时被调用。 changesObj 是一个散列，其键是已更改的绑定(bind)属性的名称，值是表单的对象。

以下示例处理 canChange 更改事件。

angular.module('app.components', [])
.component('changeHandler', {
  controller: function ChangeHandlerController() {
    this.$onChanges = function (changes) {
      if (changes.canChange) 
       this.performActionWithValueOf(changes.canChange);
    };
  },
  bindings: {
    canChange: '<'
  },
  templateUrl: 'change-handler.html'
});

需要 AngularJS >= 1.5.3 并且仅适用于单向数据绑定(bind)(如上例所示)。

文档:https://docs.angularjs.org/guide/component

引用:http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html