Question

我有一个延迟加载的Angular2 Primefaces Tree，并用作我的应用程序的导航组件。单击树中的节点将导航到相应的路径。我希望反之亦然：只要应用程序导航到路径，树就会展开并相应地选择。

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

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

Answer 1

这可能有用，虽然它不是一个直接的答案。我通过使用虚拟类：

在树的延迟加载版本上实现了双击节点扩展

  <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>

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

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;
        }); 
    }
}

.ts代码：

executionId

我希望这有助于您实现您的代码（虽然可能为时已晚:(）

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

1 个答案: