时间戳

首页 > 解决方案 > @Output 不从父组件触发方法

angular - @Output 不从父组件触发方法

问题描述

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

角度版本：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');
}

标签： angularangular-event-emitter

解决方案

正如评论中发现的那样，您的代码很好。但是你有两个彼此重叠的 div，并且 mouseenter 事件侦听器注册在后台一个，它被前台一个“隐藏”。所以它永远不会收到事件。如果您删除前（第二个）一个，那么它会按预期工作。

推荐阅读