Javascript 如何使用 Angular 组件观察组件绑定的变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35681102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to watch component binding change using Angular component
提问by Dor Cohen
How can I listen to angular component binding change and perform actions?
如何监听 Angular 组件绑定变化并执行操作？
angular.module('myapp')
.component('myComponent', {
templateUrl: 'some.html',
controller: MyController,
controllerAs: 'myCtrl',
bindings: {
items: '<'
}
});
now when itemschanges I want to perform another action using this value,
How can I do it?
现在当items我想使用这个值执行另一个操作时，我该
怎么做？
采纳答案by basarat
now when items changes I want to perform another action using this value, How can I do it?
But I want to avoid using the dying $scope
现在当项目更改时，我想使用此值执行另一个操作，我该怎么做？
但我想避免使用垂死的 $scope
If you don'twant to use $scopeyou can use a property setterto detect any changes e.g. :
如果你不希望使用$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
Please note that you shouldn't use it for complex logic (reasons : https://basarat.gitbooks.io/typescript/content/docs/tips/propertySetters.html)
请注意，您不应该将它用于复杂的逻辑（原因：https: //basarat.gitbooks.io/typescript/content/docs/tips/propertySetters.html）
回答by David Remie
You can add the $onChangesmethod to the controller
您可以将$onChanges方法添加到控制器
$onChanges(changesObj)is called whenever one-way bindings are updated. The changesObj is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form.
$onChanges(changesObj)每当更新单向绑定时调用。changesObj 是一个散列，其键是已更改的绑定属性的名称，值是表单的对象。
Following example handles canChangechange event.
以下示例处理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'
});Requires AngularJS >= 1.5.3 and works only with one-way data-binding(as in the example above).
需要 AngularJS >= 1.5.3 并且仅适用于单向数据绑定（如上例所示）。
Docs: https://docs.angularjs.org/guide/component
文档：https: //docs.angularjs.org/guide/component
Reference: http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html
参考：http: //blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html
回答by jfrej
Here's an ES5.1 version of basarat's answer:
这是 basarat答案的 ES5.1 版本：
function MyController() {
var items = [];
Object.defineProperty(this, 'items', {
get: function() {
return items;
},
set: function(newVal) {
items = newVal;
console.log('Items changed:', newVal);
}
});
}
Using Object.defineProperty(). Supported by all major browsers and IE9+.
使用Object.defineProperty()。支持所有主流浏览器和 IE9+。
回答by Chris
I've discovered a way but not sure it's the most efficient. First bring in $scope as a dependency and set it to this._scopeor the like in your constructor. I have the following then in my $onInitfunction:
我发现了一种方法，但不确定它是最有效的。首先引入 $scope 作为依赖项并将其设置为this._scope或类似的构造函数。我的$onInit函数中有以下内容：
this._scope.$watch(() => {
return this.items;
},
(newVal, oldVal) => {
// Do what you have to here
});
It's highly inspired by the answer here: Angularjs: 'controller as syntax' and $watch
它的灵感来自这里的答案：Angularjs: 'controller as syntax' and $watch
Hope it helps, it's what I'm going to use until I'm told otherwise.
希望它有帮助，这是我将要使用的，直到我被告知否则。
回答by m1gu3l
Currently you can't use angular watchers without $scope as change detection is based around $scope. Even if you use expressions in HTML it would delegate watch functionality to $scope.
目前，您不能在没有 $scope 的情况下使用 angular watchers，因为更改检测基于 $scope。即使您在 HTML 中使用表达式，它也会将监视功能委托给 $scope。
Even if you create some other mechanism to watch you will need to remember to unwatch manually - and with $scope it's done automatically.
即使您创建了一些其他机制来观看，您也需要记住手动取消观看 - 而 $scope 会自动完成。
