Question

我有一个包含此输入的组件：

@Input() list: Array<string>

如何在父组件更改此输入值时捕获？

Answer 1

实施OnChanges

ngOnChanges(changes) {
  console.log(changes);
}

ngOnChanges仅在通过Angular绑定从外部更改值时调用。

如果您想通过其他方式更改代码，您也可以制作像

这样的getter / setter

_list:Array<string>;
@Input()
set input(newVal:Array<string>) {
  this._list = newVal;
  doSomething();
}

get input()Array<string> {
  return this._list;
}

这不会涵盖对同一个数组所做的更改，只有当另一个数组分配给_list时。

Answer 2

您可以实现ngDoCheck以手动检测何时有阵列更新（添加和/或删除）。通过defaut Angular2不会检测到这种情况，因为它适用于引用，而不适用于内容。

@Component({
  (...)
})
export class SomeComponent implements DoCheck {
  @Input() list: Array<string>;

  constructor(private differ:KeyValueDiffer) {
  }

  ngDoCheck() {
    var changes = this.differ.diff(this.list);
    if (changes) {
      changes.forEachAddedItem(r => {
        // element added in the input array
      });
      changes.forEachRemovedItem(r => {
        // element removed in the input array
      });
  }
}

ngFor指令依赖于此机制。

请参阅此plunkr：http://plnkr.co/edit/LVQqpjbLENZ7AZ2a6OTt?p=preview。

Answer 3

这取决于“更改”的含义 - 您是为每个更改分配一个新数组（即，遵循不可变模式），还是您正在操作相同的数组（即，操纵单个数组的元素））？

对于不可变的情况，请使用生命周期钩OnChanges（Günter的答案），否则使用DoCheck（Thierry的答案）。请注意，每次更改检测运行时都会调用ngDoCheck()，因此只有在必要时才使用它。

Lifecycle Hooks开发指南很好地涵盖了这些案例 - OnChanges，DoCheck - 尽管他们没有向您展示如何使用DoCheck的IterableDiffer，如Thierry的答案。

如何捕获@Input值的变化

3 个答案: