Question

如何监听角度组件绑定更改并执行操作？

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

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

Answer 1

您可以将$onChanges方法添加到控制器

无论何时更新单向绑定，都会调用

$onChanges(changesObj)。 changesObj是一个哈希，其键是已更改的绑定属性的名称，值是表单的对象。

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

＆＃13;

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'
});

＆＃13;

需要AngularJS＆gt; = 1.5.3并仅使用单向数据绑定 （如上例所示）。

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

参考：http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html

Answer 2

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

但我想避免使用垂死的$ scope

如果不想要使用$scope，您可以使用属性 setter 来检测任何更改，例如：

class MyController {
    private _items: string[] = []
    set items(value:string[]){
        this._items = value;
        console.log('Items changed:',value);
    }
    get items():string[]{
        return this._items;
    }
}

const ctrl = new MyController();
ctrl.items = ['hello','world']; // will also log to the console

请注意，您不应将其用于复杂逻辑（原因：https://basarat.gitbooks.io/typescript/content/docs/tips/propertySetters.html）

Answer 3

这是basarat's answer的ES5.1版本：

function MyController() {
  var items = [];

  Object.defineProperty(this, 'items', {
    get: function() {
      return items;
    },

    set: function(newVal) {
      items = newVal;
      console.log('Items changed:', newVal);
    }
  });
}

使用Object.defineProperty()。受所有主流浏览器和IE9 +支持。

Answer 4

我发现了一种方法，但不确定它是最有效的。首先将$ scope作为依赖项引入，并在构造函数中将其设置为this._scope等。我在$onInit函数中有以下内容：

this._scope.$watch(() => {
    return this.items;
  },
  (newVal, oldVal) => {
    // Do what you have to here
  });

这里的答案高度启发：Angularjs: 'controller as syntax' and $watch

希望它有所帮助，它是我将要使用的东西，直到我告诉其他情况。

Answer 5

目前，您无法使用没有$ scope的角度观察者，因为更改检测基于$ scope。即使您在HTML中使用表达式，它也会delegate watch functionality to $scope。

即使您创建了一些其他机制来观察，您也需要记住手动取消监视 - 并且使用$ scope它会自动完成。

Answer 6

这种方法可能会有所帮助：

import { Input } from '@angular/core';

class MyComponent {
  @Input set items(value) {
    if (this._items !== value) {
      console.log(`The value has been changed from "${this._items}" to "${value}"`);
      this._items = value;
    }
  }

  private _items;  
  
  get items() {
    return this._items;
  }
}

如何使用Angular组件观察组件绑定更改

6 个答案: