如何初始化primeng树组件答案

【问题标题】：how to initialize primeng tree component如何初始化primeng树组件
【发布时间】：2016-07-09 19:31:46
【问题描述】：

给定一个tree，如何初始化它以使节点随意展开？

我已经尝试使用 @ViewChildren(Tree) tree 获取引用，但在尝试访问他的孩子时导致 undefined 引用

【问题讨论】：

【解决方案1】：

要初始化扩展的树组件，您只需要以 json 格式设置扩展为 true 的属性。

示例：

{
    "data": 
    [
        {
            "label": "Pictures",
            "data": "Pictures Folder",
            "expandedIcon": "fa-folder-open",
            "collapsedIcon": "fa-folder",
            "expanded": true, // this flag shoud be true
            "children": [
                {"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"},
                {"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"},
                {"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}]
        },
    ]
}

【讨论】：

【解决方案2】：

您可以使用将所有扩展属性设置为 true 的函数来处理此问题。

expandAll(toggle: boolean) {
  this.tree.map(node => {
    node.expanded = toggle;
  });
}

ngOnInit() {
  setTimeout(()=>{
    this.expandAll(true);
  }, 0);

}

【讨论】：

【解决方案3】：

这是一个 hack，基本上模拟树上的点击。我添加了这个解决方案，但我真的希望有人能找到更好的东西。

给定一个带有tree 的组件，我们可以获得对treenodes 的引用，然后根据需要“单击”它们：

@Component({
    selector: 'filemanager',
    templateUrl: './filemanager.html',
    directives: [Tree]
})
export class FileManagerComponent implements AfterViewInit {

    constructor(private renderer:Renderer) {}    

    ngAfterViewInit() {
        setTimeout(() => { // a timeout is necessary otherwise won't find the elements

            // get the first "p-tree" tag and find his first "toggler"
            let element = document.getElementsByTagName("p-tree")[0].getElementsByClassName("ui-tree-toggler fa fa-fw fa-caret-right")[0];

            //"click" the toggler using the angular2 renderer 
            let event = new MouseEvent('click', {bubbles: true});
            this.renderer.invokeElementMethod(element, 'dispatchEvent', [event]);
        }, 200);
    }

    // more methods and state...   
}

如果您需要在树中初始化更深的节点，则需要嵌套 setTimeout 函数。

【讨论】：