Публикация событий из рекурсивного углового компонента

Question

У меня есть компонент tree, который используется рекурсивно для рендеринга дерева, которое используется в селекторе HTML tree компонента.Теперь компоненты tree также представляют событие как nodeSelected (@Output).

HTML

<ul>
    <li *ngFor="let item of node">
        <div>
            <span (click)="treeNodeSelected(item)">
                {{item.name}}
            </span>
        </div>
        <tree *ngIf="item.child.length > 0" [node]="item.child" (nodeSelected)="treeNodeSelected($event)"></tree>
    </li>
</ul>

и вот фрагмент из файла ts

@Input("node") node;

@Output()
nodeSelected = new EventEmitter<any>(true);

..
..

treeNodeSelected(node) {
   console.log("node", node);
   this.nodeSelected.emit(node);
}

И actual-component, где я использовал в tree component

<tree [node]="nodeData" (nodeSelected)="selectedNode($event)"></tree>

ActualComponent.ts file

selectedNode(node) {
    console.log("End Component",node);
}

И вывод на пользовательский интерфейс, например

A
|-B
  |-C

Now Если я нажму на C , затем на консоли

node {...}
node {...}
node {...}
component {...}

и если я нажму B , то на консоли

node {...}
node {...}
component {...}

и если на верхнем узле, т.е. A затем

node {...}
component {...}

Я полагаю, это происходит, поскольку <tree> внутри разметки компонента дерева должен определять метод обратного вызова из файла ActualComponent.ts , ноЯ определил это из файла tree.ts .Как мне этого добиться?Конечная цель - один раз выдать событие.