Angular 2：如何檢測組件上輸入屬性的屬性更改？

Question

我有一個Angular 2 Controller，它看起來像這樣：

@Component({
  selector: 'my-component',
  template: '<div>The value is: {{ value }}</div>',
})
class MyComponent implements OnInit {
  @Input()
  value: string;

  @Output
  valueChange = new EventEmitter<number>();

  ngOnInit() {
    this.valueChange.subscribe(value => {
      console.log('new value:', value); // <-- does not get triggered
    });
  }
}

但是當值的value從模板綁定更改時：

<my-component [value]="someValue" /> <!-- valueChange not triggered! -->

valueChange事件未被觸發，因此即使模板正確更新並顯示新值，組件也不知道它已被更改。

如何檢測控制器上的輸入屬性何時更改？

Answer 1

在我看來， Output是你的組件向其他人發出事件所以他們會在必要時更新他們的視圖，它應該只用於內部需要廣播的更改（因此名稱為Output ）。 在Input更改上觸發Output事件可能會導致意外行為（因為現在內部和外部的所有更改都會觸發valueChange ，而不再是Output ）。

在你的情況下，如果你想在value變化時做一些事情，你可以把它變成一個二傳手：

private _value: string;
get value(): string {
  return this._value;
}

@Input('value')
set value(val: string) {
  this._value = val;
  console.log('new value:', value); // <-- do your logic here!
}

Answer 2

我已經使用setter來檢測輸入變量何時被修改。 您必須使用@Component裝飾器中的inputs鍵而不是@Input聲明來使其工作，如下所示：

@Component({
  selector: 'my-component',
  template: '<div>The value is: {{ value }}</div>',
  inputs: ['value']
})
class MyComponent {
  private _value: string;

  @Output
  valueChange = new EventEmitter<number>();

  set value(value) {
    this._value = value;
    console.log('new value:', value);
    this.valueChange.emit(value);
  }

  get value(value) {
    return this._value;
  }
}

另外，FYI，類方法是ngOnInit而不是onInit 。

Answer 3

我已經能夠通過OnChanges實現解決這個問題：

ngOnChanges(changes) {
  for (let key in changes) {
    if (this[key + 'Change'])
      this[key + 'Change'].emit(changes[key].currentValue);
  }
}

只要Angular檢測到Change它就會自動觸發Change事件......但有沒有辦法本機地執行此操作？