如何在PrimeNg Tree组件中通过ID查找节点并完成激活展示？

PrimeNg Tree 未提供内置的按自定义ID查找节点的API，你可以基于其TreeNode的嵌套结构自行实现递归查找，再配合组件的selection、expandedKeys绑定属性实现节点选中、路径展开的效果，完全可以替代Angular Tree Component的原有能力。

1. 前置准备 #

将你存储的folderId映射到PrimeNg TreeNode的key字段（该字段为PrimeNg Tree默认的唯一标识字段），后续逻辑会基于该字段匹配节点。

2. 实现递归查找工具方法 #

import { TreeNode } from 'primeng/api';

/**
 * 按folderId查找目标节点
 * @param nodes 树的根节点数组
 * @param targetFolderId 要查找的folderId
 */
findNodeByFolderId(nodes: TreeNode[], targetFolderId: string): TreeNode | null {
  for (const node of nodes) {
    if (node.key === targetFolderId) {
      return node;
    }
    if (node.children?.length) {
      const matchedNode = this.findNodeByFolderId(node.children, targetFolderId);
      if (matchedNode) return matchedNode;
    }
  }
  return null;
}

/**
 * 收集目标节点所有父节点的key，用于展开路径
 * @param nodes 树的根节点数组
 * @param targetFolderId 要查找的folderId
 * @param parentKeys 递归过程中传递的父节点key集合
 */
collectParentPathKeys(nodes: TreeNode[], targetFolderId: string, parentKeys: string[] = []): string[] | null {
  for (const node of nodes) {
    if (node.key === targetFolderId) {
      return parentKeys;
    }
    if (node.children?.length) {
      const matchedPath = this.collectParentPathKeys(node.children, targetFolderId, [...parentKeys, node.key]);
      if (matchedPath) return matchedPath;
    }
  }
  return null;
}

3. 模板绑定对应属性 #

<p-tree
  [value]="treeDataSource"
  [(selection)]="selectedNode"
  [(expandedKeys)]="expandedKeyMap"
  selectionMode="single"
></p-tree>

4. 组合逻辑实现节点激活与展示 #

// 组件内绑定变量
treeDataSource: TreeNode[] = []; // 你的树数据源
selectedNode: TreeNode | null = null;
expandedKeyMap: Record<string, boolean> = {};

// 恢复选中状态的调用逻辑
restoreSavedSelection(savedFolderId: string) {
  // 查找目标节点
  const targetNode = this.findNodeByFolderId(this.treeDataSource, savedFolderId);
  if (!targetNode) return;

  // 展开目标节点的所有父级路径
  const parentPathKeys = this.collectParentPathKeys(this.treeDataSource, savedFolderId) || [];
  parentPathKeys.forEach(key => {
    this.expandedKeyMap[key] = true;
  });

  // 选中激活目标节点
  this.selectedNode = targetNode;
}

注意事项 #

如果你的PrimeNg Tree使用了懒加载模式，需要先把目标节点所在路径的所有层级节点都加载完成后，再执行上述恢复逻辑，否则递归方法无法找到未加载的懒加载子节点。

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