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

15 浏览
0 Comments

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

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

@Component({
  selector: 'my-component',
  template: 'The value is: {{ value }}',
})
class MyComponent implements OnInit {
  @Input()
  value: string;
  @Output()
  valueChange = new EventEmitter();
  ngOnInit() {
    this.valueChange.subscribe(value => {
      console.log('new value:', value); // <-- 不会被触发
    });
  }
}

但是，当`value`的值从模板绑定改变时：

`valueChange`事件不会被触发，所以即使模板正确更新并显示新值，组件也不知道它已经被改变。

如何检测控制器上的输入属性何时改变？

0

3 答案

0 Comments

问题的出现原因是使用setter来检测输入变量的修改，但是需要使用`inputs`关键字在装饰器中设置，而不是在声明中设置。

解决方法是在组件的装饰器中使用`inputs`属性，或者在setter属性上使用装饰器。两种方法目前都可行，但是装饰器的方法似乎是当前的首选方式。

另外，需要注意的是类方法应该使用`ngOnInit`而不是`onInit`。

`get`访问器不应该有一个值，可以将`get`方法更新为`get value() {}`。同时，``可能需要更新为`()`。

0
0 Comments

问题原因：在Angular 2中，当我们需要检测输入属性的变化时，可以通过实现OnChanges接口来实现。但是是否有一种原生的方法来实现这个功能呢？

解决方法：可以通过实现OnChanges接口来实现检测输入属性的变化。具体的实现方式是在ngOnChanges方法中遍历changes对象，如果属性名称加上"Change"后存在于组件中，则触发对应的Change事件。

以下是实现代码：

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

通过这种方式，当Angular检测到输入属性发生变化时，会自动触发对应的Change事件。

0
0 Comments

在Angular 2中，如何检测组件的输入属性的变化？

在我看来，Output用于组件向其他组件发出事件，以便在必要时更新视图，它应该仅用于需要广播的内部变化（因此称为Output）。在Input属性变化时触发Output事件可能会导致意外行为（因为现在valueChange会对内部和外部的所有变化都触发，实际上已经不再是一个Output事件了）。

在你的情况下，如果你想在value变化时执行一些操作，你可以将其设置为一个setter方法：

private _value: string;
get value(): string {
  return this._value;
}
set value(val: string) {
  this._value = val;
  console.log('new value:', value); // 在这里执行你的逻辑！
}

0