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).触发更改Output事件Input可能会导致意外行为(现在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!
}

Answer 2

我已经使用setter来检测输入变量何时被修改.您必须使用装饰器中的inputs键@Component而不是@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.