Question

在我的angular2项目中，我实现了角树组件。我正在使用以下json数据

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' }
      ]
    }
  ]
}
];

我的html模板是，

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

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

树在我的树中显示，但我的问题是，我如何获得点击的节点详细信息。我想在getNodeName（）函数中打印选定的节点名称。

Answer 1

您需要在树的每个节点上处理事件并触发它在<tree root>组件上：
@Output() clickNode = new EventEmitter<Node>(); // with Node is class of data for node.

模板中的

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

使用你的树：
<tree-root (clickNode)="yourHandler($event)"></tree-root>

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

我还为角度2+编写虚拟树组件。它也支持你的情况。您可以在https://github.com/NamNgKh/angular2_virtual_tree

找到

我将为它制作CSS主题。所以其他人可以很容易地改变它的风格。

Answer 2

如果使用“ angular-tree-component”，则将获取节点的名称。然后，您可以对其进行改进：

在您的.html中：

<tree-root [nodes]="nodes" [options]="options" (click)="clickHandler($event)"></tree-root>

在您的.ts中：

clickHandler(event: any) {
    if (event && event.target && event.target.childNodes[0]) {
        console.log(event.target.childNodes[0].data)
    }
}

角度2树组件点击事件

2 个答案: