angular 2树组件点击事件答案

【问题标题】：angular 2 tree component click eventangular 2树组件点击事件
【发布时间】：2017-03-10 05:50:21
【问题描述】：

在我的 angular2 项目中，我实现了 angular 树组件。我正在使用以下 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() 函数中打印选定的节点名称。

【问题讨论】：

点击的节点详情是什么？你想从哪里得到？你试过什么？有什么问题？
节点详细信息是 id 和 name。例如，当我单击 root2 节点时，我想获取 id:4 和名称：root2.
请提供更多代码。您想从哪里获得详细信息？
点击什么节点？
我需要根节点和子节点。

标签： angular typescript treeview

【解决方案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) }

我还为 Angular 2+ 编写了一个虚拟树组件。它也支持你的情况。你可以找到：https://github.com/NamNgKh/angular2_virtual_tree

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

【讨论】：

【解决方案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)
    }
}

【讨论】：