javascript - 从递归角度组件发布事件

Question

我有一个tree组件，它用于递归地呈现在组件的 HTMLtree选择器中使用的树。现在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组件中使用过的地方

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

实际组件.ts文件

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

并在 UI 上输出

A
|-B
  |-C

现在如果我点击C然后在控制台上

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

如果我点击B然后在控制台上

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

如果在顶部节点上，即在A上，则

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

我猜这是因为树组件标记内部应该从ActualComponent.ts<tree>文件定义回调方法，但我已经从tree.ts文件定义了它。我怎样才能做到这一点？最终目标是发出一次事件。

标签： javascriptangular