如何在构建Angular Material树时为节点存储对应层级路径信息

1. 调整FileNode类型定义 #

给FileNode新增可选的path字段，用来存储完整层级路径：

export class FileNode {
  filename: string;
  children?: FileNode[];
  type?: any;
  path?: string; // 新增路径存储字段
}

2. 修改buildFileTree方法 #

新增parentPath入参传递父级路径，递归时拼接当前层级的key生成完整路径，仅给带type的叶子节点赋值path：

// 新增第三个参数parentPath，默认值为空字符串
buildFileTree(obj: {[key: string]: any}, level: number, parentPath: string = ''): FileNode[] {
  return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
    const value = obj[key];
    const node = new FileNode();
    node.filename = key;
    // 拼接当前节点的完整路径
    const currentPath = parentPath ? `${parentPath}.${key}` : key;

    if (value != null) {
      if (typeof value === 'object') {
        // 递归生成子节点时，传入当前节点路径作为父路径
        node.children = this.buildFileTree(value, level + 1, currentPath);
      } else {
        node.type = value;
        // 仅给带type的叶子节点赋值path字段
        node.path = currentPath;
      }
    }
    return accumulator.concat(node);
  }, []);
}

3. 修正initialize方法的冗余逻辑 #

原代码中TREE_DATA已经是JSON.parse处理后的对象，不需要重复解析，否则会报错：

initialize() {
  // 直接传入TREE_DATA，移除多余的JSON.parse
  const data = this.buildFileTree(TREE_DATA, 0);
  this.dataChange.next(data);
}

效果验证 #

修改后生成的树节点中，所有叶子节点都会携带正确的path字段，示例输出如下：

{
  "filename": "model",
  "type": "",
  "path": "cars.0.model"
}

完全符合要求的路径格式。

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