Как инициализировать компонент primeng tree

Question

Дано tree как инициализировать его таким образом, чтобы узлы были расширены по желанию?

я уже пытался получить ссылку с @ViewChildren(Tree) tree, но в результате undefined ссылок при попытке получить доступ к своим детям

Answer 1

Это хак, который в основном имитирует щелчки по дереву. Я добавляю это решение, но я действительно надеюсь, что кто-то может найти что-то лучшее.

Учитывая компонент с 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 функции.

Answer 2

Для инициализации расширенного компонента дерева вам нужно только установить в вашем формате 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"}] 
     }, 
    ] 
} 

Answer 3

Вы можете справиться с этим с помощью функции, которые ставят все расширенные атрибуты верно.

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

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

}