如何为每个角度树根节点的子项指定链接或函数？

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