如何监听来自类属性 TypeScript 的值变化 - Angular [英] How to listen for value changes from class property TypeScript - Angular
问题描述
在 AngularJS 中,我们可以使用 $watch
、$digest
... 来监听变量的变化,这在新版本的 Angular (5, 6) 中不再可能.
在 Angular 中,此行为现在是组件生命周期的一部分.
我查看了官方文档、文章,尤其是 Angular 5 更改检测在可变对象上,了解如何在 TypeScript 类/Angular
今天的提议是:
import { OnChanges, SimpleChanges, DoCheck } from '@angular/core';@成分({选择器:'my-comp',templateUrl: 'my-comp.html',styleUrls: ['my-comp.css'],输入:['输入1','输入2']})导出类 MyClass 实现 OnChanges、DoCheck、OnInit{//我可以跟踪这个属性的变化@Input() input1:string;@Input() input2:string;//我想要跟踪的属性!myProperty_1:布尔值myProperty_2: ['A', 'B', 'C'];myProperty_3:MysObject;构造函数(){}ngOnInit() { }//解决方案 1 - 当 Angular 检测到 @Input 属性发生变化时触发ngOnChanges(更改:SimpleChanges){//改变动作}//解决方案 2 - Angular 无法检测到输入属性的更改//DoCheck 允许我们实现自定义更改检测ngDoCheck() {//改变动作}}
这仅适用于 @Input()
属性!
如果我想跟踪组件自身属性(myProperty_1
、myProperty_2
或 myProperty_3
)的更改,这将不起作用.>
有人可以帮我解决这个问题吗?最好是与 Angular 5 兼容的解决方案
您仍然可以通过 DoCheck
lifehook 通过 KeyValueDiffers
检查组件的字段成员值变化.
import { DoCheck, KeyValueDiffers, KeyValueDiffer } from '@angular/core';不同:KeyValueDiffer;构造函数(私有不同:KeyValueDiffers){this.differ = this.differs.find({}).create();}ngDoCheck() {const change = this.differ.diff(this);如果(改变){change.forEachChangedItem(item => {console.log('项目已更改', 项目);});}}
参见演示.
In AngularJS, we can listen variable change using $watch
, $digest
... which is no longer possible with the new versions of Angular (5, 6).
In Angular, this behaviour is now part of the component lifecycle.
I checked on the official documention, articles and especially on Angular 5 change detection on mutable objects, to find out how to listen to a variable (class property) change in a TypeScript class / Angular
What is proposed today is :
import { OnChanges, SimpleChanges, DoCheck } from '@angular/core';
@Component({
selector: 'my-comp',
templateUrl: 'my-comp.html',
styleUrls: ['my-comp.css'],
inputs:['input1', 'input2']
})
export class MyClass implements OnChanges, DoCheck, OnInit{
//I can track changes for this properties
@Input() input1:string;
@Input() input2:string;
//Properties what I want to track !
myProperty_1: boolean
myProperty_2: ['A', 'B', 'C'];
myProperty_3: MysObject;
constructor() { }
ngOnInit() { }
//Solution 1 - fired when Angular detects changes to the @Input properties
ngOnChanges(changes: SimpleChanges) {
//Action for change
}
//Solution 2 - Where Angular fails to detect the changes to the input property
//the DoCheck allows us to implement our custom change detection
ngDoCheck() {
//Action for change
}
}
This is only true for @Input()
property !
If I want to track changes of my component's own properties (myProperty_1
, myProperty_2
or myProperty_3
), this will not work.
Can someone help me to solve this problematic ? Preferably a solution that is compatible with Angular 5
You can still check component's field members value change by KeyValueDiffers
via DoCheck
lifehook.
import { DoCheck, KeyValueDiffers, KeyValueDiffer } from '@angular/core';
differ: KeyValueDiffer<string, any>;
constructor(private differs: KeyValueDiffers) {
this.differ = this.differs.find({}).create();
}
ngDoCheck() {
const change = this.differ.diff(this);
if (change) {
change.forEachChangedItem(item => {
console.log('item changed', item);
});
}
}
see demo.
这篇关于如何监听来自类属性 TypeScript 的值变化 - Angular的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!