Угловой 7: как обнаружить изменения в связном дереве данных?

Question

Дано дерево данных бесконечного уровня, связанное с дочерним компонентом.

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

Родительский компонент привязывает это дерево данных к своему дочернему элементу.

В дочернем компоненте dataTree добавляется в TreeController и перечисляется / отображается в шаблоне, и я хотел бы следить за изменениями в связанном @Input dataTree:

• если новый элемент списка был добавлен на любой уровень
• если какой-либо элемент списка был удален
• если значение какого-либо свойства изменилось на любом уровне

Я уже знаю, что KeyValue и Iterable Differ могут использоваться для этой задачи, но мне это не очень нравится в этом случае, потому что мне нужен полный обход дерева.

Другая идея заключается в создании службы, в которой было бы dataTree, а дочерний компонент подписывался на изменения через Subject. Есть несколько веских причин, по которым я не хочу пользоваться услугами здесь ...

Есть ли идеи, как я могу решить эту проблему хорошим способом?

Answer 1

Подход, который я предлагаю, - это определение метода получения / установки, так что вы можете получить любые изменения в целевом свойстве:

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

Надеюсь, это поможет.