PrimeNG：如何以编程方式扩展延迟加载的树答案

【问题标题】：PrimeNG: How to programmatically expand a lazily loaded treePrimeNG：如何以编程方式扩展延迟加载的树
【发布时间】：2017-05-12 23:39:38
【问题描述】：

我有一个延迟加载的Angular2 Primefaces Tree，用作我的应用程序的导航组件。单击树中的节点导航到相应的路由。我希望反过来：每当应用程序导航到某个路由时，树都会展开并相应地进行选择。

由于树在路由器插座之外，我让它的组件从服务中获取路由参数（因为 ActivatedRoute 在路由器插座之外还不能工作......）并调用一个搜索我的 TreeNode 的方法 [ ] 为正确的节点，然后展开它（通过设置 .expanded = true），然后搜索它的子节点，然后展开它，等等，直到树的展开状态应该匹配我的路线。

问题是我最终得到的是顶级节点的箭头向下而不是向右，但没有显示它的子节点。我认为这与延迟加载有关，但我不知道如何解决。我错过了什么吗？

【问题讨论】：

标签： tree primeng

【解决方案1】：

这可能是有用的，虽然它不是一个直接的答案。我通过使用虚拟类在树的延迟加载版本上实现了双击节点扩展：

 export class NodeLoader {
        node: TreeNode;
    }

然后通过模板化节点使用它，将节点对象作为虚拟事件的属性传递到正常的扩展器事件代码中。然后将其拼接到正常的延迟加载代码中，并且似乎运行良好：

  <style>  
     .icon {
            background-image: url(/dist/assets/images/redicon12.png);
            float: left;
            height: 12px;
            width: 12px;
            margin-right: 5px;
            margin-top: 4px;
            margin-left: -3px;
        }
    </style>

    <p-tree #treecomp
            selectionMode="single"
            [value]="root"
            [style]="{'overflow':'auto','width':'100%'}"
            [loading]="loading"
            (onNodeExpand)="loadNode($event)"
            (onNodeSelect)="nodeSelect($event)">

        <ng-template let-node pTemplate="default">
            <!--if there is not  a collapsedIcon or expandedIcon  set in the data or no font-awesome class is set 
then use custom icons .font-awesome changes the spacing so it must be allowed for  -->
            <ng-container *ngIf="node.collapsedIcon!=null">

                <div class="icon" (dblclick)="expandNode(node)"></div>

            </ng-container>
            <div (dblclick)="expandNode(node)">{{node.label}}</div>
        </ng-template>
    </p-tree>

.ts 代码：

expandNode(node: TreeNode) {
   node.expanded = !node.expanded;
   let event: NodeLoader = new NodeLoader();
   event.node = node;
   this.loadNode(event);
}
loadNode(event) {
    if (event.node) {
        //the node data is stored as a pipe delimited string
        let vals: string[] = event.node.data.split('|');            
        //make a call to a remote url to load children of the current node 
        //and add the new nodes as children
        let id: string = vals[0]; 
        this.loading = true;
        this.nodeService.getTreeChildren(id).subscribe(nodes => {
            event.node.children = nodes;
            this.loading = false;
        }); 
    }
}

我希望这可以帮助你实现你的代码（虽然可能为时已晚:()

【讨论】：

@Dale 你解决了吗？