@ Выход не метод запуска из родительского компонента

Question

Я боролся с этой проблемой в течение нескольких часов, и она становится довольно неприятной. У меня есть дочерний компонент, в котором мне нужно определить, когда мышь наводится на что-то. Событие mouseenter срабатывает правильно, и мой метод в дочернем компоненте (app-circle) запускается, но после того, как я вызвал (), метод из родительского компонента не вызывается.

Угловая версия: 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');
}

Answer 1

Как выяснилось в комментариях, ваш код в порядке. Но у вас есть два элемента div друг над другом, и слушатель события mouseenter регистрируется в фоновом режиме, который «скрыт» передним планом. Так что он никогда не получит событие. Если вы удалите переднюю (вторую), то она будет работать как положено.

Answer 2

Должно работать как положено, если вы используете событие emit дочернего компонента для Parent. Я реализовал ту же логику, используя директиву, которая будет прослушивать событие mouseenter с помощью @Hostlistener и генерировать событие вывода.

Вот код стекаблика

https://stackblitz.com/edit/angular-yniybk?file=src%2Fapp%2FattachMouse.Directive.ts

Answer 3

Попробуйте вернуть любые данные в эмиттер, потому что вы выделили тип

any => EventEmitter<any>

Так что я думаю попробовать вернуть что-нибудь

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

Это может сработать !!!

Я надеюсь, что смогу помочь тебе больше