Angular 2 : how do I detect attribute changes to input attributes on a Component?

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 的值从模板绑定(bind)更改时:

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

valueChange 事件未被触发，因此即使模板正确更新并显示新值，组件也不知道它已被更改。

如何检测 Controller 上的输入属性何时更改？

Answer 1

在我看来，Output 是让您的组件向其他组件发出事件，以便他们在必要时更新他们的 View ，它应该只用于内部所做的需要广播的更改(因此名称 Output)。在 Input 更改时触发 Output 事件可能会导致意外行为(因为现在 valueChange 是针对内部和外部的所有更改触发的，而不是真的是一个 Output 了)。

在你的例子中，如果你想在你的 value 改变时做一些事情，你可以让它成为一个 setter:

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!
}