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

希望能幫助到你。