@Output不从父组件触发方法

Question

我已经为这个问题苦苦挣扎了好几个小时，而且问题越来越令人沮丧。 我有一个子组件，需要在其中检测鼠标何时悬停在某个组件上。 mouseenter事件正确触发，并且子组件（app-circle）中的方法也被触发，但是在我发出emit（）之后，父组件的方法没有被调用。

角度版本：8.0.1

以下是一些相关代码：

子组件（应用圈子）：

TS：

@Output() mouseEnter: EventEmitter<any> = new EventEmitter();
...
public onMouseEnter() {
   this.mouseEnter.emit();
}

HTML：

<a (mouseenter)="onMouseEnter()"> ... </a>

父组件：

HTML：

 <app-circle (mouseEnter)="onBackgroundCircleMouseEnter()"> </app-circle>

TS：

public onBackgroundCircleMouseEnter() {
   console.log('emitted');
}

Answer 1

在注释中发现，您的代码很好。但是，您有两个div相互重叠，并且mouseenter事件侦听器注册在后台一个，而前台侦听器被“隐藏”。因此它永远不会收到事件。如果删除前额（第二个），则它会按预期工作。

Answer 2

如果您正在使用“父级”的“子级组件”发射事件，它应该可以正常工作。 我已经使用指令实现了相同的逻辑，该指令将使用@Hostlistener监听'mouseenter'事件并发出输出事件。

这是stackblitz代码

https://stackblitz.com/edit/angular-yniybk?file=src%2Fapp%2FattachMouse.Directive.ts

Answer 3

尝试返回发射器中的任何数据，因为您使用了专用类型

any => EventEmitter<any>

所以我想尝试返回任何东西

public onMouseEnter() {
    this.mouseEnter.emit({});
}

可能有效！

我希望我能为您提供更多帮助