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

Question

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

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

现在当items变化我想用这个值来执行另一个动作，
我该怎么办呢？

Answer 1

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

但我想避免使用垂死$范围

如果不想用$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）

Answer 2

我发现了一种方法，但并不确定它是最有效的。首先引入$ 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 3

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

即使您创建了一些其他机制来观察，您仍然需要记住手动解除观察 - 并且使用$ scope自动完成。

Answer 4

这里是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 5

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

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

以下示例句柄canChange更改事件。

angular.module('app.components', []) 
 
.component('changeHandler', { 
 
    controller: function ChangeHandlerController() { 
 
    $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