Angular14 PrimeNG p-tree整节点点击及子节点识别问题求助

方案1：利用组件内置事件与API（推荐） #

PrimeNG的p-tree原生支持nodeClick事件，可直接获取点击的节点对象，配合组件的toggleNode方法就能实现点击节点任意区域切换展开状态：

1. 模板中绑定事件：

<p-tree 
  [value]="treeData" 
  (nodeClick)="handleNodeClick($event)"
></p-tree>

2. 组件类实现逻辑：

import { Component, ViewChild } from '@angular/core';
import { Tree } from 'primeng/tree';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  @ViewChild(Tree) treeComponent!: Tree;
  treeData: any[]; // 你的树结构数据

  handleNodeClick(event: any) {
    // event.node 就是当前点击的节点实例
    this.treeComponent.toggleNode(event.node);
  }
}

方案2：自定义节点模板实现全区域可点击 #

如果需要自定义节点样式，可通过ng-template自定义节点内容，将整个节点容器设为可点击区域：

<p-tree [value]="treeData">
  <ng-template let-node pTemplate="default">
    <div 
      style="width: 100%; padding: 0.5rem; cursor: pointer;"
      (click)="toggleNodeStatus(node)"
    >
      <span 
        class="pi" 
        [ngClass]="{
          'pi-folder-open': node.expanded, 
          'pi-folder': !node.expanded,
          'pi-file': !node.children
        }"
      ></span>
      <span class="ml-2">{{node.label}}</span>
    </div>
  </ng-template>
</p-tree>

组件类方法：

toggleNodeStatus(node: any) {
  // 直接切换节点的expanded状态
  node.expanded = !node.expanded;
}

关于你之前的问题分析 #

你之前通过原生DOM监听p-tree元素的点击，无法精准定位子节点的原因是：p-tree的节点是动态渲染的，原生DOM元素无法直接关联到组件绑定的节点数据。而PrimeNG封装的nodeClick事件已经直接传递了点击的节点对象，无需手动操作DOM。

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