angular - 树 : How to keep opened states when tree updated

Question

当我将新数据设置为 this.dataSource.data 时，我需要保持树节点打开/关闭状态。新数据与旧数据非常相似 - 它只是添加/删除了一个或几个最低级别的节点。

我的想法是将节点展开记录到ReplaySubject，并重放展开队列。它应该工作，但这是非常丑陋的方式。

我希望这里有更优雅的方法来解决我的问题。

Answer 1

我有一个数据对象的层次结构来显示在 Material 树中。每个数据对象都被转换为包含原始数据对象的 ID 和 ParentID 的 TreeNodeModel。在更新数据源的方法中保存/恢复节点的展开状态:

// Method that updates the data source
public updateDataSource(dataObjects: SomeDataObject) {
    
  // save node's expanded state
  const expandedNodesIds: string[] = [];
  if (this.treeControl.dataNodes) {
    this.treeControl.dataNodes.forEach((node: TreeNodeModel) => {
      if (this.treeControl.isExpandable(node) && this.treeControl.isExpanded(node)) {
        expandedNodesIds.push(node.id);
      }
    });
  }
    
  // update data source
  this.treeDataSource.data = dataObjects;
    
  // restore node's expanded state
  this.treeControl.dataNodes
    .filter(node => this.isActive(node) || expandedNodesIds.find(id => id === node.id))
    .forEach(nodeToExpand => {
      this.expandNode(nodeToExpand);
    });
}
    
// Method that expands the node (if not a leave) and its parent nodes (if any) using the TreeControl
private expandNode(treeNode: TreeNodeModel | undefined): void {
  if (!treeNode) {
    return;
  }
    
  if (this.treeControl.isExpandable(treeNode)) {
    this.treeControl.expand(treeNode);
  }
    
  const parentId = treeNode.parentId ? treeNode.parentId : undefined;
  this.expandNode(this.treeControl.dataNodes.find(node => node.id === parentId));
}

interface TreeNodeModel {
  expandable: boolean;
  level: number;
  id: string;
  parentId: string;
  // most probably some more custom data ;)
}