Angular2 handle click in parent of recursive children - recursion

Question

I created a dynamic recursive (tree)node component which built by a json resonponse from the server. The request and response handled in tree component. I try to handle all child click event in my app. Later I like to use a child-routing which allow to load content page with the clicked node's data.
I just started to play with angular2 so let me know if you thought this is a completly wrong concept at all :)
tree.ts:
#Component({
selector: 'tree',
template: '
<div (click)="onClick($event)" class="tree">
<node *ngIf="data" [key]="key" [data]="data"></node>
</div>
',
...
})
export class TreeComponent {
key: string;
data: any;
error: any;
ngOnInit() {
this.key = 'tree';
let url = 'http://localhost:53494/api/tree';
this.http.get(url)
.map(res => res.json())
.subscribe(
value => this.data = value,
error => this.error = error);
}
...
onClick($event: any) {//This will recieves all click of all node!
$event.preventDefault();
//1. How to get the clicked node's key and data here?
//2. How to (sub/child)route to './tree/' + [node].key?
}
...
}
node.ts:
#Component({
selector: 'node',
directives: [NodeComponent], //<<< use self!
template: '
<a href="" class="node collapsed"
[attr.data-toggle]="data.node ? 'collapse' : null"
[attr.data-target]="'#' + nodePath"
aria-expanded="false" >
<span class="ident-{{level}}">
{{data.name || key}}
</span>
</a>
<div [id]="nodePath" class="tree collapse">
<node *ngFor="#nodeKey of nodeKeys"
[path]="nodePath"
[key]="nodeKey"
[level]="level+1"
[data]="data.node[nodeKey]">
</node>
</div>
'
...
})
export class NodeComponent {
#Input() key: string;
#Input() data: any;
#Input() level: number = 0;
#Input() path: string = 'node';
private nodePath: string;
private nodeKeys: Array<string>;
ngOnInit() {
this.nodePath = this.path + '-' + this.key;
if (this.data.node) {
this.nodeKeys = Object.keys(this.data.node);
}
}
}