Winkel 2 Baumkomponente Click-Ereignis

Question

In meinem angular2 Projekt i Winkel Baum component.i folgende json Daten

nodes = [ 
{ 
    id: 1, 
    name: 'root1', 
    isExpanded: true, 
    children: [ 
    { id: 2, name: 'child1' }, 
    { id: 3, name: 'child2' } 
    ] 
}, 
{ 
    id: 4, 
    name: 'root2', 
    children: [ 
    { id: 5, name: 'child2.1' }, 
    { 
     id: 6, 
     name: 'child2.2', 
     children: [ 
     { id: 7, name: 'subsub' } 
     ] 
    } 
    ] 
} 
]; 

Und meine HTML-Vorlage ist,

<tree-root [nodes]="nodes"></tree-root> 

getNodeName() 
{ 
//display selected node name 
console.log(); 
} 

Baum Anzeigen in ist mit umgesetzt habe mein Baum, aber mein Problem ist, wie kann ich Knotendetails geklickt bekommen. Ich möchte den ausgewählten Knotennamen innerhalb der Funktion getNodeName() drucken.

Answer 1

Sie müssen Ereignis auf jedem Knoten des Baums verarbeiten und es auslösen.
Auf <tree root> Komponente:
@Output() clickNode = new EventEmitter<Node>(); // with Node is class of data for node.

in Vorlage:
...
<your-tree-item (click)="clickHandler(node)"></your-tree-item>
...
clickHandler(node: Node){
this.clickNode.emit(node)
}

Verwendung Ihr Baum:
<tree-root (clickNode)="yourHandler($event)"></tree-root>

yourHandler(node: Node) { alert(node.id) }

ich auch einen virtuellen Baum Komponente für Winkel 2+ zu schreiben. Und es unterstützt auch Ihren Fall. Sie finden unter: https://github.com/NamNgKh/angular2_virtual_tree

Ich werde CSS Theme dafür machen. so kann andere Stil leicht davon ändern.