Question

我有一个主要组成部分和一个孩子

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

子组件以递归方式呈现多级树结构（即，如果有子代，则呈现自身），每个节点均可单击，而不论其是否为终端节点。

在子组件中，每个节点都有一个注册为“ clickedNode（）”的点击事件。现在，由于我不希望我的click事件冒泡到被单击节点的头部，因此在“ clickedNode（）”函数中编写了“ event.stopPropagation（）”。

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

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

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

Answer 1

您可以为它实现两种click方法。一种是stopPrapogation，另一种是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);
}

希望它能对您有所帮助。

Answer 2

最主要的是，在HTML中，您传递了一个值，并且此函数希望接收两个值。如果要访问单击的节点，可以通过事件本身来完成

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

2 个答案: