Angular2ツリーコンポーネントのクリックイベント

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

ただ、あなたのクリックイベントの一例を与える

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 2

ここで下線の価値がある一つの簡単な事はツリーオブジェクトへのオプションオブジェクトの実際の割り当てです。これはcomponent.tsで次に

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

すなわちテンプレートで行われ、次のようにあなたがそれをフックしてください：

treeOptions = { actionMapping: this.actionMapping } 

はこれをうまくするために数分を取り、 docsはこれに関して少し欠けています。 this例で説明したように

Answer 3

あなたはさまざまなイベントをバインドすることができ

例：

あなたは `ツリーroot`のオプションとして` actionMapping`を提供する必要が

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