@Output 不从父组件触发方法答案

【问题标题】：@Output not firing method from parent component@Output 不从父组件触发方法
【发布时间】：2019-06-23 07:56:16
【问题描述】：

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

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');
}

【问题讨论】：

无法重现，使用您发布的确切代码：stackblitz.com/edit/angular-hmzhvk。发布一个完整的最小示例作为堆栈闪电战，就像我刚刚所做的那样，但它确实重现了这个问题。
我不确定@Output 的名称，尝试将名称更改为其他名称，它可能与 angular 内部的名称重叠
@JBNizet 我认为这是所有相关的代码。但是，当从 stackblitz 复制粘贴组件时，一切都按预期工作。似乎问题在于它更深，因此我不知道要复制什么，不知道什么才能复制它。如果你愿意，你可以看看整个项目（它只是几个组件）github.com/AlecFirtulescu/circular-progress-bar
由于我们对您的代码的所有了解都是您发布的内容，并且由于您发布的内容正常，因此在您发布一个完整的最小示例来重现该问题之前，我们可能无法提供帮助。尝试消除您认为与您的代码无关的所有内容（一个接一个），并查看错误是否仍然存在，直到您找到一个最小的示例。这样做很有可能让您通过消除问题找到导致问题的原因并看到问题消失。
我刚刚在你的代码上做了这个，答案很简单：你有两个相互重叠的div，并且mouseenter事件监听器注册在后台一个，即“隐藏“在前台。所以它永远不会收到事件。如果您删除前（第二个）一个，那么它会按预期工作。

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

这是stackblitz代码

【讨论】：

【解决方案3】：

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

any => EventEmitter<any>

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

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

它可以工作！！！

希望能帮到你更多

【讨论】：