如果调用了“event.stopPropagation()”，则“@Output”装饰器不会发出事件答案

【问题标题】："@Output" decorator doesn't emit event if "event.stopPropagation()" called如果调用了“event.stopPropagation()”，则“@Output”装饰器不会发出事件
【发布时间】：2019-09-25 22:47:50
【问题描述】：

我有一个主要组件和一个孩子

<main>
     <child 
        [nodes]="nodes" 
        (nodeChanged)="someFunction(output)">
     </child>
<main>

子组件递归渲染多级树结构（即如果有子节点，它会渲染自己），其中每个节点都是可点击的，无论它是否是终端节点。

在子组件中，每个节点都有一个注册为“clickedNode()”的点击事件。现在因为我不想让我的点击事件冒泡到点击节点的头部，所以我在“clickedNode()”函数中写了“event.stopPropagation()”。

@Output() nodeChanged = new EventEmitter<Object>();

clickedNode(selectedNode, e:MouseEvent){
    this.nodeChanged.emit(selectedNode);
    e.stopPropagation();
}

现在的问题是@output emitter 如果组件的内部级别被单击，则不会。仅在单击一级节点时才会发出。

【问题讨论】：

我只能猜到一个原因，e 在某些时候没有定义，clickedNode 崩溃。检查控制台。 @Output 和鼠标事件完全没有关联。
is selectedNode 实际上是您的方法传入的事件吗？尝试删除传递给你的 clickedNode 方法 clickedNode( e:MouseEvent) 的第一个参数 - 你实际上并没有将一个节点传递给你正在调用的方法
@David (click)="clickedNode(node, $event)" selectedNode 是我从 html 传递的值，即被点击的节点对象
@David Html 是父组件，“clickedNode”函数写在子组件中。我已经编辑了问题以使其清楚
只是试一试，但是.... 在拨打this.nodeChanged.emit(selectedNode)之前先拨打stopPropogation()

标签： javascript angular angular6 angular-components

【解决方案1】：

你可以为它实现两种点击方法。一种是stopPrapogation，另一种是EventEmitter

HTML

<div (click)="$event.stopPropagation()" (click)="clickedNode(<data you want to pass>)"> 
</div>

@Output() nodeChanged = new EventEmitter<Object>();

clickedNode(selectedNode){
    this.nodeChanged.emit(selectedNode);
}

希望对你有帮助。

【讨论】：

【解决方案2】：

主要是在 HTML 中你传递一个值，而这个函数期望接收两个值。如果你想访问被点击的节点，你可以通过事件本身来完成

【讨论】：

Html 是父组件，“clickedNode”函数写在子组件中。我已经编辑了问题以使其清楚
那么我们需要子组件的代码来确保您在子组件 HTML 中的事件声明中做得很好