如何在更新或刷新后保持嵌套树（Nested Tree）已展开项的状态？

要实现页面刷新后保持树中选中项的展开状态，核心思路是把需要展开的节点标识（比如ID）存在本地存储，页面初始化时读取并递归处理树结构展开对应节点，具体步骤如下：

1. 存储展开节点的唯一标识 #

当节点选中/取消选中时，提取选中项的唯一标识（比如id），存入localStorage持久化保存：

// 假设selectedItems是你收集的已选中树项集合
updateExpandedStorage() {
  // 提取选中项的id，去重避免重复存储
  const expandedIds = [...new Set(this.selectedItems.map(item => item.id))];
  localStorage.setItem('expandedTreeNodes', JSON.stringify(expandedIds));
}

在勾选/取消勾选节点的回调里调用这个方法，比如onNodeSelect或onNodeUnselect事件中。

2. 页面初始化时读取存储的展开标识 #

在组件初始化阶段，从localStorage取出之前保存的展开节点ID，准备展开操作：

ngOnInit() {
  const savedExpandedIds = localStorage.getItem('expandedTreeNodes');
  this.expandedNodeIds = savedExpandedIds ? JSON.parse(savedExpandedIds) : [];
  // 触发展开节点逻辑
  this.expandTargetNodes(this.treeData);
}

3. 递归遍历树结构，展开目标节点 #

写一个递归函数遍历整个树，匹配到需要展开的节点时，设置其展开状态（假设你的树节点有expanded属性控制展开）：

expandTargetNodes(nodes: any[]) {
  nodes.forEach(node => {
    // 如果当前节点在展开列表中，设置为展开状态
    if (this.expandedNodeIds.includes(node.id)) {
      node.expanded = true;
    }
    // 递归处理子节点
    if (node.children && node.children.length > 0) {
      this.expandTargetNodes(node.children);
    }
  });
}

4. 可选：自动展开选中节点的所有父节点 #

如果需要确保选中节点的所有父节点也处于展开状态（避免选中节点被折叠在父节点下不可见），可以补充递归收集父节点ID的逻辑：

// 更新展开集合时，同时添加所有选中节点的父节点ID
updateExpandedStorage() {
  let expandedIds = this.selectedItems.map(item => item.id);
  // 收集每个选中节点的所有父节点ID
  this.selectedItems.forEach(item => {
    expandedIds = expandedIds.concat(this.getParentIds(item));
  });
  // 去重后存储
  expandedIds = [...new Set(expandedIds)];
  localStorage.setItem('expandedTreeNodes', JSON.stringify(expandedIds));
}

// 递归获取单个节点的所有父节点ID
getParentIds(node: any): number[] {
  const parentIds = [];
  let currentNode = node;
  // 假设节点有parentId属性指向父节点ID，且你有根据ID查找节点的方法
  while (currentNode.parentId) {
    parentIds.push(currentNode.parentId);
    currentNode = this.findNodeById(this.treeData, currentNode.parentId);
  }
  return parentIds;
}

// 根据ID递归查找节点
findNodeById(nodes: any[], id: number): any {
  for (const node of nodes) {
    if (node.id === id) return node;
    if (node.children) {
      const found = this.findNodeById(node.children, id);
      if (found) return found;
    }
  }
  return null;
}

注意事项 #

• 如果使用Angular Material Tree等第三方组件，可能需要调用组件自身的展开API（比如treeControl.expand(node)），而非直接修改节点的expanded属性，只需在找到目标节点后调用对应API即可。
• 确保localStorage存储的数据格式正确，避免解析错误。

内容的提问来源于stack exchange，提问作者user19317490