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的定义，因此您可以获取目标属性的任何更改：

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

希望能帮助到你。