如果调用了“ event.stopPropagation（）”，则“ @Output”装饰器不会发出事件

Question

I have one main component and one child

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

Child component renders multilevel tree structure recursively (ie it renders itself if there are children) in which every node is clickable, irrespective of it is terminal node or not.

In child component every node has a click event registered "clickedNode()". Now because I don't want my click event to bubble up to clicked node's head I wrote "event.stopPropagation()" in "clickedNode()" function.

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

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

Now the problem is @output emitter doesn't if inner level of component gets clicked. It emits only if level one nodes are clicked.

Answer 1

You can implement two click method for it.One is for stopPrapogation and another one is for EventEmitter

HTML

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

TS

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

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

I hope it helps you out.

Answer 2

The main thing is that in the HTML you are passing one value and this function expects to receive two values. If you want to access to the node clicked you can do it through the event by itself