PrimeNG Tree v16复选框模式下如何实现程序化单选？

要实现checkbox模式下选中单个子节点时自动取消所有其他节点（包括父节点）的选中状态，仅保留当前子节点选中，你需要同时处理选中数组和节点自身的选中状态——因为PrimeNG Tree的checkbox会自动维护父子节点的关联状态，仅修改selectedFiles无法同步清除父节点的半选/选中标记。

完整解决方案代码： #

import { TreeNode } from 'primeng/api';
import { Component, OnInit } from '@angular/core';
import { NodeService } from '../nodeservice';

export class TreeCheckboxDemo implements OnInit {
  files!: TreeNode[];
  selectedFiles!: TreeNode[];

  constructor(private nodeService: NodeService) {}

  ngOnInit() {
    this.nodeService.getFiles().then((data) => (this.files = data));
  }

  public onNodeSelect(event: any) {
    // 递归重置所有节点的选中、半选状态
    this.resetNodeSelection(this.files);
    
    // 设置当前选中节点的状态
    event.node.selected = true;
    // 更新选中数组
    this.selectedFiles = [event.node];
    // 触发视图更新（强制Tree重新渲染状态）
    this.files = [...this.files];
  }

  private resetNodeSelection(nodes: TreeNode[]) {
    nodes.forEach(node => {
      // 清除当前节点的选中标记
      node.selected = false;
      // 清除当前节点的半选标记（父节点特有）
      node.partialSelected = false;
      // 递归处理子节点
      if (node.children?.length) {
        this.resetNodeSelection(node.children);
      }
    });
  }
}

关键说明： #

• 递归重置节点状态：通过resetNodeSelection方法遍历所有节点，手动设置selected和partialSelected为false，彻底清除所有节点的选中痕迹。
• 触发视图更新：修改节点属性后，通过this.files = [...this.files]创建数组副本，触发Angular变更检测，让Tree组件重新渲染节点状态。
• 覆盖默认选中逻辑：在onNodeSelect中先重置所有状态，再设置当前节点为选中，确保最终只有目标节点处于选中状态。

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