如何访问Kendo for Angular TreeView数据实现树节点递归遍历

核心结论 #

你绑定到[nodes]属性的本地data对象，会在拖拽操作完成后被组件自动更新为最新结构。addItem、removeItem事件触发时，节点移位、增删的逻辑已经同步写入你传入的数据源，不需要依赖事件参数手动计算索引变动。

实现步骤 #

• 组件类中保留对绑定数据源data的引用，不要在模板中传入临时变量
• 拖拽完成后，直接递归遍历本地data对象即可拿到全量最新节点位置，不需要从组件内部额外获取根节点
• 递归遍历过程中重新生成每个节点的路径索引，覆盖原有索引值即可

递归遍历参考代码 #

/**
 * 递归遍历树结构，更新所有节点的路径索引
 * @param nodes 树节点数组
 * @param parentIndex 父节点路径索引
 */
updateNodeIndex(nodes: any[], parentIndex = ''): void {
  nodes.forEach((node, idx) => {
    // 拼接生成 0_1_2 格式的当前节点索引
    const currentPath = parentIndex ? `${parentIndex}_${idx}` : `${idx}`;
    // 更新节点上存储的索引字段，可根据自己的业务字段名调整
    node.pathIndex = currentPath;
    // 存在子节点则递归向下遍历
    if (node.items?.length) {
      this.updateNodeIndex(node.items, currentPath);
    }
  });
}

// 拖拽完成回调中调用
handleDrop(event: any): void {
  // 延时等待数据同步完成后执行遍历
  setTimeout(() => {
    this.updateNodeIndex(this.data);
    // 此处this.data已为拖拽后的最新结构，所有节点位置均已同步
    console.log('全量最新树数据', this.data);
  }, 0);
}

可选：通过组件实例访问数据源 #

如果需要直接获取TreeView组件实例持有的数据源，可通过@ViewChild获取组件引用：

import { ViewChild } from '@angular/core';
import { TreeViewComponent } from '@progress/kendo-angular-treeview';

@ViewChild(TreeViewComponent) private treeViewRef: TreeViewComponent;

ngAfterViewInit() {
  // 可通过实例的nodes属性访问组件当前持有的数据源
  console.log('组件实例数据源', this.treeViewRef.nodes);
}

注意：优先使用本地绑定的data对象做业务处理，直接操作组件实例内部属性可能存在版本兼容风险。

现有组件配置无需修改，拖拽事件触发后本地数据源会自动同步节点移位结果，不需要单独监听每个节点的位置变动。

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