如何爲每個角度樹根節點的子項指定鏈接或函數？

Question

如何爲每個角度樹根節點的子項指定鏈接或函數？ .TS

nodes = [{id:1,name:"parent",children:[{id:2,name:"children1"}, 
             {id:3,name:"children2"}] 
     }]; 

// edited after advise from @SachilaRanawaka 
handleEvent(event){ 
    alert(event.eventName); 
} 

如何指定的鏈接（如A HREF？路由器？）或函數，在點擊運行的.html

<!-- edited after advise from @SachilaRanawaka, 
somehow (onToggle) is not having any reactions 
but (click) has--> 

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

例

例children1還是children2？

是否有房產？

東西沿着這行：

nodes = [{id:1,name:"parent",children:[ 
           {id:2,name:"children1", link:"/test/children1.html" },           
           {id:3,name:"children2", link:"/test/children2.html" } 
          ] 
     }]; 

下面是關於樹的我使用的是怎樣的一個鏈接：Angular 2 Tree

Answer 1

好吧，我發現我的上述問題的解決方案。

所以只是爲了分享。這裏去...

這樣做的想法是獲得沒有孩子的節點的名稱，並與它做一些事情。使其可點擊。

通常，可點擊節點應該是最後一個擴展節點。

對於我下面的例子，我給了它一個函數來調用帶有節點名稱的警報。

更新.HTML使用NG-模板

<tree-root #tree [nodes]="nodes"> 
<ng-template #treeNodeTemplate let-node> 
    <!--For node with no children(last node), give it a function/link--> 
    <div *ngIf="!node.data.children"> 
    <span (click)="doSomething(node.data.name)">{{ node.data.name }}</span> 
    </div> 
    <!--For node with children, don't need a link, all it needs to do is to just expand--> 
    <div *ngIf="node.data.children"> 
    <span>{{ node.data.name }}</span> 
    </div> 
</ng-template> 
</tree-root> 

添加DoSomething的（名字）方法.TS

nodes = [{id:1,name:"parent",children:[ 
            {id:2,name:"children1"},           
            {id:3,name:"children2"} 
           ] 
      }]; 

    doSomething(nodeName){ 
     alert(nodeName); 
    } 

所以輸出：

> parent    <--- not clickable 
    > children1  <--- clickable and generated alert box 
    > children2  <--- clickable and generated alert box