Angular Material嵌套树：获取选中节点的父节点及层级方法

嘿，我来帮你搞定这个问题！针对Angular Material嵌套树的父节点/完整父层级获取，我们可以通过递归遍历树数据的方式来实现，刚好适配你提到的官方示例结构。

1. 编写递归查找函数 #

因为树是嵌套结构，我们需要用递归遍历整个数据集合，定位到目标节点的父节点或完整路径。

方案A：获取完整父层级路径（从根到直接父节点的链） #

这个函数会返回一个数组，包含从根节点开始到目标节点的直接父节点的所有层级节点：

// 假设你的节点接口和示例一致，名为NestedTreeNode
findParentPath(node: NestedTreeNode, treeData: NestedTreeNode[], path: NestedTreeNode[] = []): NestedTreeNode[] | null {
  for (const item of treeData) {
    const currentPath = [...path, item];
    // 检查当前节点的子节点是否包含目标节点
    if (item.children?.includes(node)) {
      return currentPath;
    }
    // 递归遍历子节点
    if (item.children && item.children.length > 0) {
      const result = this.findParentPath(node, item.children, currentPath);
      if (result) return result;
    }
  }
  return null;
}

方案B：仅获取直接父节点 #

如果只需要目标节点的直接父节点，简化后的函数如下：

findDirectParent(node: NestedTreeNode, treeData: NestedTreeNode[]): NestedTreeNode | null {
  for (const item of treeData) {
    if (item.children?.includes(node)) {
      return item;
    }
    if (item.children && item.children.length > 0) {
      const parent = this.findDirectParent(node, item.children);
      if (parent) return parent;
    }
  }
  return null;
}

2. 在组件中调用函数 #

结合你已有的选中节点逻辑（用SelectionModel管理选中状态），可以这样使用：

// 获取当前选中的第一个节点（单选场景）
const selectedNode = this.selection.selected[0];
if (selectedNode) {
  // 获取完整父层级路径
  const fullParentPath = this.findParentPath(selectedNode, this.dataSource.data);
  console.log("完整父层级：", fullParentPath);

  // 获取直接父节点
  const directParentNode = this.findDirectParent(selectedNode, this.dataSource.data);
  console.log("直接父节点：", directParentNode);
}

3. 额外注意点 #

• 确保你的NestedTreeNode接口包含可选的children属性，和官方示例保持一致
• 如果是多选场景，记得遍历this.selection.selected数组，逐个处理每个选中节点
• 如果树数据是异步加载的，要等数据完全加载完成后再调用查找函数，避免找不到节点的情况

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