如何以编程方式关注 PrimeNG 树中的节点？

Posted 2023-02-21

【中文标题】如何以编程方式关注 PrimeNG 树中的节点？

【英文标题】：How to programmatically focus to a node in PrimeNG Tree?

【发布时间】：2017-07-05 10:38:06

【问题描述】：

使用 PrimeNG，我可以滚动到 TreeNode：

在html中：

<p-tree #mytreeid id="mytree"></p-tree>

在 Angular 中：

@ViewChild("mytree") mytree: Tree;
// selection is the TreeNode you want to scroll into view
scrollToSelectionPrimeNgDataTree(selection, tree, elementIdName) 
      if (tree.value !== null) 
          let index = tree.value.indexOf(selection);
              let ele = document.getElementById(elementIdName).querySelectorAll("p-treenode")[index];
              ele.scrollIntoView();
              //ele.focus();
      
  

问题：如何使 TreeNode（即“选择”）集中？我尝试调用focus()方法，但是focus()不是Element的方法。

【问题讨论】：

其实我想要的是TreeNode可以有一个属性，比如[selected]，当它设置为'true'时，Tree会滚动到节点并专注于它，即。节点被“选中”。

【参考方案1】：

我找到了解决办法，我们只需要将[(selection)]设置为选中的节点即可：

<p-tree #mytree id="mytree" [value]="componentGroups" selectionMode="single" [(selection)]="selectedNode">

【参考方案2】：

您必须将之前的数据转换为 TreeNode 并将其绑定到 selection 属性 下面是一个很好的例子： 假设您有一个嵌套类别列表，并且您应该在编辑模式下选择其中一个：

previouslySelectedParentCategory:TreeNode

initializeForEdit()
 this.previouslySelectedParentCategory= 
    this.convertCategoryToNode(this.selectedParentCategory)



  private convertCategoryToNode(category): TreeNode 
    return 
      key: category.categoryId,
      label: category.name,
      data: category,
    ;
  

HTML 文件

 <p-tree
        [filter]="true"
        [value]="categoriesNode"
        [scrollHeight]="defaultScrollHeight"
        selectionMode="single"
        [(selection)]="previouslySelectedParentCategory"
        display="chip"
        (onNodeSelect)="handleNodeSelect($event)"
        #parentCategoryTree
      >
        <ng-template p-Template="empty">
           "primeng.emptyMessage" | translate 
        </ng-template>
      </p-tree>