这个 originalEvent 是从哪里来的 Angular 中使用 EventEmitter 2+

Question

也许我的 google-fu 很弱，因为我还没有找到任何相关信息，但我想尝试澄清一些关于 Angular 中 EventEmitters 行为的信息 2+组件。考虑以下代码：

我的图表-1.component.html

<div *ngFor="let node of nodes">
    <div [id]="node.id" (click)="onNodeClick(node)">
    {{node.content}}
    </div>
</div>

我的图表-1.component.ts

@Output() nodeClick = new EventEmitter();

onNodeClick(nodeData: any): void {
    this.nodeClick.emit(nodeData);
}

我的图表-2.component.html

<div *ngFor="let node of nodes">
    <div [id]="node.id" (click)="onNodeClick($event)">
    {{node.content}}
    </div>
</div>

我的图表-2.component.ts

@Output() nodeClick = new EventEmitter();

onNodeClick(event: any): void {
    this.nodeClick.emit(this.currentNode);
}

home.component.html

<my-chart-1 (nodeClick)="onNodeClick($event)"></my-chart-1>
<my-chart-2 (nodeClick)="onNodeClick($event)"></my-chart-2>

home.component.ts

onNodeClick(event: any): void {
    console.log(event)
}

这是这两个节点点击的输出：

我的图表 1

{originalEvent: MouseEvent, node: {nodeData}}

我的图表 2

{nodeData}

在调用 eventEmitter.emit 函数的函数中捕获 originalEvent 是否是 originalEvent 没有自动添加到发出的数据的原因？还是这里发生了其他我不明白的事情？ originalEvent 是从哪里来的？？

Answer 1

当我回答我自己的 Whosebug 问题时，我总是很尴尬。这种情况每年至少在我身上发生 3 次，我每次都讨厌它。这通常是因为我忽略了一些愚蠢的事情，所以当我向 Whosebug 社区展示它时，最初的情况总是不知何故，当我为了后代的缘故回来纠正它时，我表现为我是一个巨大的傻瓜。本次也不例外。

为了后代，我使用了一个名为 primeng 的库，特别是 primeng 的组织结构图模块。在我的组织结构图中，单击节点时会调用一个函数。我还在每个特定节点的模板上放置了一个点击事件函数，这并不是我点击的巧合。图表模板看起来像这样：

<p-organizationChart ... (onNodeSelect)="onNodeClick($event)" ... >
    <ng-template let-node >
        <div (click)="onNodeClick(node)">
            {{node.contents}}
        </div>
    </ng-template>
</p-organizationChart>

如您所见，我在 p-organizationChart 上调用了与内部 div 相同的事件结果函数，但因为我从未单击内部 div ], 当我 console.logged 我在函数中的结果时，我只看到了一个事件。从 p-organizationChart 传递的“$event”包括原始事件和实际节点数据，因此这是我输出中 originalEvent 的来源。但我正在查看 individual 节点的模板，并认为其中涉及某种黑魔法。这没有。只有我，是个傻瓜。谢谢你的时间。

这个 originalEvent 是从哪里来的 Angular 中使用 EventEmitter 2+

where is this originalEvent coming from using EventEmitter in Angular 2+

custom-events

angular

angular-event-emitter