Question

我有一个Angular 2控制器，如下所示：

@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是您的组件向其他人发出事件，以便他们在必要时更新其视图，它只应用于内部需要广播的更改（因此名称{ {1}}）。在Output更改时触发Output事件可能会导致意外行为（因为现在内部和外部的所有更改都会触发Input，而不再是valueChange更改

在您的情况下，如果您希望在Output更改时执行操作，则可以将其设为安装程序：

value

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

另外，仅供参考，类方法为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事件......但有没有办法在本地执行此操作？

Angular 2：如何检测组件上输入属性的属性更改？

3 个答案: