PrimeNG p-treeSelect选中子节点后无法收缩问题求助

PrimeNG的p-treeSelect组件没有内置选中节点后自动收缩非祖先节点的配置，需要通过组件API手动控制展开状态，具体实现步骤如下：

实现思路 #

1. 获取p-treeSelect组件实例，访问其内部的Tree组件
2. 监听节点选中事件，触发后先折叠所有节点
3. 重新展开选中节点的所有祖先节点，最终只保留选中节点的祖先链处于展开状态

代码示例 #

组件类代码 #

import { Component, ViewChild } from '@angular/core';
import { TreeSelect } from 'primeng/treeselect';
import { TreeNode } from 'primeng/api';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('treeSelect') treeSelect!: TreeSelect;
  selectedNode: TreeNode | null = null;
  // 树形数据示例
  treeNodes: TreeNode[] = [
    {
      label: '一级节点A',
      children: [
        {
          label: '二级节点A1',
          children: [
            { label: '三级节点A1-1' },
            { label: '三级节点A1-2' }
          ]
        }
      ]
    },
    {
      label: '一级节点B',
      children: [
        { label: '二级节点B1' }
      ]
    }
  ];

  handleNodeSelect(event: any): void {
    this.selectedNode = event.value;
    // 先折叠所有节点
    this.treeSelect.tree.collapseAll();
    // 遍历并展开选中节点的所有祖先
    let currentNode = this.selectedNode;
    while (currentNode?.parent) {
      this.treeSelect.tree.expand(currentNode.parent);
      currentNode = currentNode.parent;
    }
  }
}

模板代码 #

<p-treeSelect 
  #treeSelect 
  [(ngModel)]="selectedNode" 
  [options]="treeNodes" 
  placeholder="请选择节点"
  (onChange)="handleNodeSelect($event)"
></p-treeSelect>

注意事项 #

• PrimeNG会自动为TreeNode添加parent引用，无需手动维护，可直接通过selectedNode.parent遍历祖先链
• 若节点结构自定义程度较高，可提前为每个节点设置唯一key，通过操作Tree组件的expandedKeys集合来更精确控制展开状态

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