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。这是一个简单的例子。从changesDetected()调用changeProperties()不是一个选项，因为该组件可能有多个方法修改组件的属性。我不想在修改属性的每个方法的末尾调用changesDetected()，因为这意味着来自多个方法的多次调用。

我尝试使用OnChanges和AfterContentChecked检测更改，但它们都不起作用。这些方法检测@input属性的变化但不检测＆＃34; native＆＃34;的变化。组件内的属性。

简而言之，我正在寻找一种方法来在每次修改组件的内部属性时触发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');
  }

}

您还可以在这些属性的setter中发出change事件，选择在您的用例中更有意义的内容。例如，参见得分属性

检测Angular 2上的属性更改

1 个答案: