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

【问题标题】：How to programmatically focus to a node in PrimeNG Tree?如何以编程方式关注 PrimeNG 树中的节点？
【发布时间】：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会滚动到节点并专注于它，即。节点被“选中”。

标签： angular primeng

【解决方案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>

【讨论】：