当前位置：首页 > news >正文

angular-tree-component组件中实现特定节点自动展开

news 2025/7/19 8:21:33

核心API 都在 expandToNode这个函数中

HTML

treeData的数据结构大概如下

[{"key": "3293040275","id": "law_category/3293040275","name": "嘿嘿嘿嘿","rank": 0,"parentKey": "0","parentName": null,"rule": "","data": null,"children": [{"key": "3293069168","id": "law_category/3293069168","name": "哈哈哈哈","rank": 1,"parentKey": "3293040275","parentName": null,"rule": "","data": null,"children": []}]},{"key": "3293069383","id": "law_category/3293069383","name": "呵呵呵呵","rank": 0,"parentKey": "0","parentName": null,"rule": "","data": null,"children": []}
]

<tree-root#tree[nodes]="treeData"[options]="options"
><ng-template #treeNodeTemplate let-node let-index="index"><span>{{ node.data.name }}</span></ng-template>
</tree-root>

JS

getTree是获取树的数据 treeNodeId是要展开节点的Id
setTimeout是为了先让树渲染出来然后再进行节点选择

import { ViewChild } from "@angular/core";
import { TreeComponent } from "@circlon/angular-tree-component";@ViewChild("tree") tree: TreeComponent;options = {displayField: "nodeName",// isExpandedField: "expanded",// idField: "uuid",hasChildrenField: "nodes",// actionMapping: {//   mouse: {//     dblClick: (tree, node, $event) => {//   		if (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);// 		}//   },//   keys: {//     [KEYS.ENTER]: (tree, node, $event) => {//       node.expandAll();//     }//   }// },allowDrag: (node) => {return true;},allowDrop: (node) => {return true;},allowDragoverStyling: true,levelPadding: 10,useVirtualScroll: true,animateExpand: true,scrollOnActivate: true,animateSpeed: 30,animateAcceleration: 1.2,scrollContainer: document.documentElement, // HTML
};// 获取树结构 getTree是获取树的数据  treeNodeId是要展开节点的Idthis.LawsService.getTRee().subscribe((data) => {this.treeData = data?.data;console.log(this.treeData);setTimeout(() => {this.expandToNode(treeNodeId);}, 0);});

expandToNode(nodeId: string) {const treeModel = this.tree.treeModel;const targetNode = treeModel.getNodeById(nodeId);if (targetNode) {targetNode.ensureVisible();treeModel.setActiveNode(targetNode, { noEvent: true, noFocus: true });}
}