@Output 不从父组件触发方法

Question

我已经为这个问题苦苦挣扎了几个小时，它变得非常令人沮丧。我有一个子组件，我需要在其中检测鼠标何时悬停在某物上。 mouseenter 事件正确触发，我在子组件 (app-circle) 中的方法被触发，但是在我 emit() 之后，父组件的方法没有被调用。

Angular版本：8.0.1

这里是一些相关的代码：

子组件（app-circle）：

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

尝试 return 发射器中的任何数据，因为你使用了类型

any => EventEmitter<any>

所以我想尝试 return任何东西

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

可能有用！！！

希望能帮到你更多

Answer 2

它应该按预期工作，如果您正在使用子组件向父组件发出事件。我已经使用指令实现了相同的逻辑，该指令将使用@Hostlistener 侦听 'mouseenter' 事件并发出输出事件。

这是 stackblitz 代码

Answer 3

正如在评论中发现的那样，您的代码没有问题。但是你有两个 div 相互重叠，并且 mouseenter 事件侦听器注册在后台，这是前台的"hidden"。所以它永远不会收到事件。如果您删除前景（第二个），那么它会按预期工作。

@Output not firing method from parent component