Декоратор "@Output" не генерирует событие, если вызвана "event.stopPropagation ()"

Question

У меня есть один основной компонент и один дочерний элемент

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

Дочерний компонент рекурсивно отображает многоуровневую древовидную структуру (т. Е. Он отображает себя, если есть дочерние элементы), в которой каждый узел является активным, независимо от того, является ли он конечным узлом или нет.

В дочернем компоненте каждый узел имеет зарегистрированное событие click "clickedNode ()". Теперь, поскольку я не хочу, чтобы мое событие click вспыхнуло до заголовка узла, по которому щелкнули, я написал функцию «event.stopPropagation ()» в функции «clickedNode ()».

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

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

Теперь проблема в том, @output emitter нет, если щелкнуть внутренний уровень компонента. Он излучается только при щелчке узлов первого уровня.

Answer 1

Главное, что в HTML вы передаете одно значение, и эта функция ожидает получить два значения. Если вы хотите получить доступ к выбранному узлу, вы можете сделать это через само событие

Answer 2

Вы можете реализовать метод двух щелчков для него. Один для 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);
}

Надеюсь, это поможет вам.