Angular 7：如何检测绑定数据树上的更改？

Question

给出了一个无限级的数据树，绑定到一个子组件。

dataTree = [ { name: 'root level', children: [{   name: 'root level
first child',   children: [...more children here...] }] } ]

父组件将此dataTree绑定到其子代。

在子组件中，dataTree被添加到TreeController并在模板上列出/显示，我想关注绑定的@Input dataTree上的更改：

• 如果新列表项已添加到任何级别
• 如果有任何列表项被删除
• 如果任何属性的值在任何级别更改

我已经知道KeyValue和Iterable Differ可以用于此问题，但是在这种情况下，我真的不喜欢它，因为我需要完整的树遍历。

另一个想法是创建一个具有dataTree的服务，并且子组件通过Subject订阅更改。我不想在这里使用服务背后有一些很好的理由...

有什么办法可以很好地解决这个问题吗？

Answer 1

我建议的一种方法是定义getter / setter方法，以便您可以对target属性进行任何更改：

private _dataTree: DataTree;

public get dataTree() {
  return this._dataTree;
}

@Input()
public set dataTree(dataTree: DataTree) {
// Here you can compare changes, as described on your question, and do whatever is needed
  if (this.myComparisonMethodThatDetectsMyNeedsOn(dataTree)) {
    this._dataTree = dataTree;
  }
}

希望有帮助。