41

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

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

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

4

6 回答 6

66

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

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

以下示例处理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 并且仅适用于单向数据绑定（如上例所示）。

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

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

于 2016-05-05T11:16:02.797 回答
29

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

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

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

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 ）

于 2016-03-08T05:29:18.337 回答
7

这是 es5.1 版本的basarat 的回答：

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+。

于 2016-04-27T13:01:25.723 回答
3

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

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

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

希望它有所帮助，这就是我将要使用的东西，直到我被告知否则。

于 2016-02-29T21:36:01.290 回答
0

目前你不能在没有 $scope 的情况下使用角度观察者，因为变更检测是基于 $scope 的。即使您在 HTML 中使用表达式，它也会将监视功能委托给 $scope。

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

于 2016-03-07T21:23:38.960 回答
0

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

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;
  }
}
于 2021-06-14T18:46:44.197 回答