Javascript 检测角度上的属性更改

在组件级别响应属性更改的最佳方法是什么？我要寻找的是一种在组件的某个属性每次更改时触发方法的方法。这里有一个组件：

@Component({selector: 'component', template: '{{name}} {{number}}'})
class singleComp {
  name: string = 'Old';
  number: number = 1;

  changeProperties() {
    this.name = 'New';
    this.number = 2;
  }

  changesDetected() {
    console.log('Changes detected');
  }
}

@Component({selector: 'component', template: '{{name}} {{number}}'})
class singleComp {
  name: string = 'Old';
  number: number = 1;
  private propertiesChanged: EventEmitter<any> = new EventEmitter();
  private _score: number;

  get score():boolean {
    return this._score;
  }

  set score(s:number) {
    this._score = s;
    this.propertiesChanged.emit(s);
  }

  constructor() {
     this.propertiesChanged.subscrive(() => this.changesDetected());
  }
  changeProperties() {
    this.name = 'New';
    this.number = 2;
    this.propertiesChanged.emit({}); // you can pass any object here, chanegd properties as well.
  }

  changesDetected() {
    console.log('Changes detected');
  }

在上面的示例中，singleComp有两个属性

name

和

number

。这是一个简单的例子。从

changeProperties（）

调用

changesDetected（）。我不想在每个修改属性的方法末尾调用
changesDetected（）
，因为这将意味着来自多个方法的多个调用

我曾尝试使用
OnChanges
和
AfterContentChecked
来检测更改，但它们都不起作用。这些方法检测
@input
属性的更改，但不检测组件内部“本机”属性的更改

简单介绍一下，我正在寻找一种方法，在每次修改组件的内部属性时触发
changesDetected（）

编辑

确实，
ngDoCheck
检测内部更改。但是，一旦实现，它还将检测外部组件上的更改，在组件级别上它并不是真正有用的。
您应该使用或使用此用例

在组件级别响应属性更改的最佳方法是什么？我要寻找的是一种在组件的某个属性每次更改时触发方法的方法。这里有一个组件：

@Component({selector: 'component', template: '{{name}} {{number}}'})
class singleComp {
  name: string = 'Old';
  number: number = 1;

  changeProperties() {
    this.name = 'New';
    this.number = 2;
  }

  changesDetected() {
    console.log('Changes detected');
  }
}

@Component({selector: 'component', template: '{{name}} {{number}}'})
class singleComp {
  name: string = 'Old';
  number: number = 1;
  private propertiesChanged: EventEmitter<any> = new EventEmitter();
  private _score: number;

  get score():boolean {
    return this._score;
  }

  set score(s:number) {
    this._score = s;
    this.propertiesChanged.emit(s);
  }

  constructor() {
     this.propertiesChanged.subscrive(() => this.changesDetected());
  }
  changeProperties() {
    this.name = 'New';
    this.number = 2;
    this.propertiesChanged.emit({}); // you can pass any object here, chanegd properties as well.
  }

  changesDetected() {
    console.log('Changes detected');
  }

@Component（{selector:'Component'，template:{{{name}}{{{number}}}）
单类{
名称：string='Old'；
编号：编号=1；
私有属性已更改：EventEmitter=new EventEmitter（）；
私人(u)分数:数字;；
获取分数（）：布尔值{
把这个还给我；
}
设置分数（s:编号）{
这个._分数=s；
this.propertiesChanged.emit（s）；
}
构造函数（）{
this.propertiesChanged.Subscriptve（（）=>this.changesDetected（））；
}
changeProperties（）{
this.name='New'；
这个数字=2；
this.propertiesChanged.emit（{}）；//您可以在这里传递任何对象，也可以传递chanegd属性。
}
changesDetected（）{
log（“检测到的更改”）；
}

}

您还可以在这些属性的setter中发出change事件，选择在您的用例中更有意义的内容。请参见您应该使用的score属性或此用例

在组件级别响应属性更改的最佳方法是什么？我要寻找的是一种在组件的某个属性每次更改时触发方法的方法。这里有一个组件：

@Component({selector: 'component', template: '{{name}} {{number}}'})
class singleComp {
  name: string = 'Old';
  number: number = 1;

  changeProperties() {
    this.name = 'New';
    this.number = 2;
  }

  changesDetected() {
    console.log('Changes detected');
  }
}

@Component({selector: 'component', template: '{{name}} {{number}}'})
class singleComp {
  name: string = 'Old';
  number: number = 1;
  private propertiesChanged: EventEmitter<any> = new EventEmitter();
  private _score: number;

  get score():boolean {
    return this._score;
  }

  set score(s:number) {
    this._score = s;
    this.propertiesChanged.emit(s);
  }

  constructor() {
     this.propertiesChanged.subscrive(() => this.changesDetected());
  }
  changeProperties() {
    this.name = 'New';
    this.number = 2;
    this.propertiesChanged.emit({}); // you can pass any object here, chanegd properties as well.
  }

  changesDetected() {
    console.log('Changes detected');
  }

@Component（{selector:'Component'，template:{{{name}}{{{number}}}）
单类{
名称：string='Old'；
编号：编号=1；
私有属性已更改：EventEmitter=new EventEmitter（）；
私人(u)分数:数字;；
获取分数（）：布尔值{
把这个还给我；
}
设置分数（s:编号）{
这个._分数=s；
this.propertiesChanged.emit（s）；
}
构造函数（）{
this.propertiesChanged.Subscriptve（（）=>this.changesDetected（））；
}
changeProperties（）{
this.name='New'；
这个数字=2；
this.propertiesChanged.emit（{}）；//您可以在这里传递任何对象，也可以传递chanegd属性。
}
changesDetected（）{
log（“检测到的更改”）；
}

}

您还可以在这些属性的setter中发出change事件，选择在您的用例中更有意义的内容。查看score属性，例如，
可能重复的@AnteJablanAdamović，我在问题上写道，我不寻找
@input
更改检测。我感兴趣的是组件本机属性的内部更改。请再次阅读另一个线程，如果您仍然不理解，我建议您阅读英语教程<代码>不带

即使

ngDoCheck

检查内部属性更改，也会在每次更改外部组件时触发。当您想将变更检测范围扩大到组件级别时，这是没有用的。可能重复@AnteJablanAdamović，我在问题上写道，我不寻找

@input

变更检测。我感兴趣的是组件本机属性的内部更改。请再次阅读另一个线程，如果您仍然不理解，我建议您阅读英语教程<代码>不带即使

ngDoCheck

检查内部属性更改，也会在每次更改外部组件时触发。当您想将更改检测范围限定到组件级别时，这是没有用的。我喜欢您的方法，但它需要在每个修改属性的方法中实现一个新的代码行。与直接调用

changesDetected（）

方法具有相同的效果。是否可以将侦听器直接附加到组件的属性，并在每次修改它们时作出反应？如果您使用properties setter实现此功能，则无需将其放在任何位置，只需将其放在setter中即可。我喜欢您的方法，但它需要在修改属性的每个方法内实现新的代码行。与直接调用

changesDetected（）

方法具有相同的效果。是否可以将侦听器直接附加到组件的属性，并在每次修改它们时作出反应？如果您使用properties setter实现此功能，则不需要将其放在任何地方，只需将其放在setter中即可。