这个 originalEvent 来自在 Angular 2+

问题描述

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

my-chart-1.component.html

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

my-chart-1.component.ts

@Output() nodeClick = new EventEmitter();

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

my-chart-2.component.html

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

my-chart-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)
}

这是这两个 nodeClick 的输出：

我的图表 1

{originalEvent: MouseEvent,node: {nodeData}}

我的图表 2

{nodeData}

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

解决方法

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

为了后人的缘故，我使用了一个名为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 的来源。但我正在查看各个节点的模板，并认为其中涉及某种黑魔法。这没有。只有我，是个傻瓜。感谢您抽出宝贵时间。

angular angular angular-event-emitter custom-events