Question

如何实现角树组件节点点击事件。

import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular2-tree-component';

const actionMapping:IActionMapping = {
  mouse: {
    click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI
  },
  keys: {
    [KEYS.ENTER]: (tree, node, $event) => alert(`This is   ${node.data.name}`)
  }  
}

Answer 1

这里值得强调的一件简单事情是将选项对象实际分配给树对象。这发生在模板中，即

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

然后在component.ts中确保你按照以下方式连接它：

treeOptions = { actionMapping: this.actionMapping }

花了几分钟时间解决这个问题，文档在这方面有点缺乏。

Answer 2

只提供一个点击事件的例子

import { TreeNode, TreeModel, TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';


const actionMapping:IActionMapping = {
mouse: {
click: (tree, node, $event) => {
  $event.shiftKey
    ? TREE_ACTIONS.TOGGLE_SELECTED_MULTI(tree, node, $event)
    : TREE_ACTIONS.TOGGLE_SELECTED(tree, node, $event)
}
   }
 };

@Component({
      selector: 'category',
      template: `  <div class="d-inline-block">
                  <tree-root #tree [nodes]="categories">
                    <ng-template #treeNodeTemplate let-node let-index="index">
                        <span>{{ node.data.name }}</span>
                        <button (click)="addNode(tree)">add</button>
                    </ng-template>
                 </tree-root>
                </div>`,
      styles : [styles]
})

export class Category implements OnInit {
public categories :any;
  addNode(tree) {
      this.categories[0].children.push({
      name: 'a new child'
  });
   tree.treeModel.update();
}

Answer 3

您可以按照this示例

中的说明绑定不同的事件

示例：

<tree-root [nodes]="nodes"
    (activate)="someMethodInComponent($event)"
    (deactivate)="someOtherMethodInComponent($event)">
</tree-root>

Answer 4

当您单击任何节点时，将选择它并发出(activate)事件。您可以通过将method传递为$event来为此事件添加prop。然后，您可以通过在component.ts文件中实现该方法来获得被点击的节点，例如$event.node

component.html文件

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

component.ts文件

public onClick(event) {
  console.log('>> onClick', event.node.data);
}

Angular2树组件单击事件

4 个答案:

component.html文件

component.ts文件