Javascript 递归嵌套的组件向其父组件（同一组件的实例）发送事件

抱歉，我真的不知道该如何表达这个问题，我也明白这没什么可参考的

上下文： 我有递归嵌套的“container”组件，这些组件将被动态地填充到所见即所得HTML编辑器项目中

我需要能够为悬停在不同位置的容器（边框等）设置样式，但由于HTML/CSS工作方式的限制，悬停在子元素上会导致父元素本身也处于悬停状态

从那以后，我一直在试图找到一个程序化的解决方案

目标：我试图让嵌套容器组件向其父级发出布尔值true，表示它们被悬停在上方，以便父级将名为hovered的属性设置为false（我的样式设置基于此值）。这意味着我的组件既是发射器又是监听器，我认为这会起作用。它不

问题：发出事件的元素似乎捕捉到了与悬停在单个容器组件上触发onChildOvered（）函数相同的事件。我可能只是误解了这种亲子沟通应该如何运作

代码：

元素布局示例：

---

根据您的示例元素布局，子元素未向父元素发射。 为此，您需要更新布局，如下所示：

<app-element-container [orientation]="false" type="parent">
     <app-element-container (hoverEvent)="onChildHoverEvent($event)"
                            class="row" 
                            type="row" >
            <!--etc-->
     </app-element-container>
</app-element-container>

---

然后，您需要声明onChildHoverEvent，以便在子级遇到鼠标悬停事件时执行操作。

根据您的示例元素布局，子级未向父级发射。 为此，您需要更新布局，如下所示：

<app-element-container [orientation]="false" type="parent">
     <app-element-container (hoverEvent)="onChildHoverEvent($event)"
                            class="row" 
                            type="row" >
            <!--etc-->
     </app-element-container>
</app-element-container>

---

然后，当孩子遇到鼠标悬停事件时，您需要声明onChildHoverEvent以执行某些操作。

my component.ts中的HostListener注释方法是否执行相同的操作？它是我监听mouseenter和mouse leave事件的地方。我的组件中HostListener注释的方法是否做了相同的事情？这里是我收听鼠标移动和鼠标离开事件的地方