检测 Angular 上的属性变化

Question

在组件级别对属性更改做出反应的最佳方法是什么？我正在寻找的是一种在每次组件的某个属性发生更改时触发方法的方法。这是一个单独的组件：

@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');
  }
}

在上面的例子中，singleComp 有两个属性name 和number。这是一个简单的例子。从changeProperties() 调用changesDetected() 不是一个选项，因为组件可能有多种方法来修改组件的属性。我不想在修改属性的每个方法的末尾调用changesDetected()，因为这意味着来自多个方法的多次调用。

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

简而言之，我正在寻找一种在每次修改组件的内部属性时触发changesDetected() 的方法。

编辑

ngDoCheck 确实检测到了内部变化。但是，一旦实现，它也会检测外部组件的变化，并且在组件级别上并没有真正的用处。

Answer 1

您应该使用EventEmitter 或此用例。

在组件级别对属性更改做出反应的最佳方法是什么？我正在寻找的是一种在每次组件的某个属性发生更改时触发方法的方法。这是一个单独的组件：

@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');
  }

}

您还可以在这些属性的设置器中发出更改事件，选择对您的用例更有意义的任何内容。例如查看 score 属性