代码之家 › 专栏 › 技术社区 › Alec

@输出不从父组件触发方法

angular-event-emitter angular

0

Alec · 技术社区 · 7 年前

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

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

1 回复 | 直到 7 年前

1

3

JB Nizet 7 年前

正如在评论中发现的,您的代码很好。但是有两个div相互叠加,mouseenter事件监听器在后台一个上注册,前台一个“隐藏”了这个监听器。所以它从来没有收到过这个事件。如果移除前导(第二个),那么它将按预期工作。

2

0

Suresh Kumar Ariya 7 年前

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

这是stackblitz密码

3

-1

Abdulrahman Falyoun 7 年前

尝试返回发射器中的任何数据,因为你指定了类型

any => EventEmitter<any>

所以我想试着归还任何东西

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

它可能有用!!!

我希望我能帮助你更多