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

Question

我已经为这个问题苦苦挣扎了几个小时，而且变得非常令人沮丧。我有一个子组件，我需要在其中检测鼠标何时悬停在某物上。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');
}

score 3 · Accepted Answer

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

score 0 · Accepted Answer

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

这是stackblitz代码

score -1 · Accepted Answer

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

any => EventEmitter<any>

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

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

它可能工作！

我希望我能帮助你更多

3 回答 3