Передать все события мыши от родительского к дочернему компоненту - Angular 6

Question

У меня есть родительский компонент, который я хочу передать всем событиям мыши, происходящим внутри, дочернему компоненту, который содержит 3 разных компонента, которые зависят от передаваемых данных.
Моя цель не использоватьслушатели событий внутри родительского компонента, но внутри дочернего компонента и обрабатывают всю логику внутри дочернего компонента

Сначала я подумал о создании директивы с @HostListners вместо дочернего компонента и связыванииэто к родительскому элементу, но так как внутри дочернего компонента есть компоненты, я не пошел на это.

Любая помощь была бы оценена.

Пример:

<div class="some-class"> // Pass all mouse events from here 

 <app-child-component> // To here
   <app-child-of-child-component-1></app-child-of-child-component-1>
   <app-child-of-child-component-2></app-child-of-child-component-2>
   <app-child-of-child-component-3></app-child-of-child-component-3>
 </app-child-component>

</div>

Answer 1

Вы можете создать директиву для прослушивания всех событий мыши

@Directive({
  selector: "[appMouseListener]"
})
export class MouseListenerDirective {
  constructor() {}

  private enterSub = new Subject<MouseEvent>();

  public enter = this.enterSub.asObservable();

  @HostListener("mouseenter", ["$event"]) onMouseEnter(event: MouseEvent) {
    this.enterSub.next(event);
  }
}

, если вам нужно, вы можете отфильтровать события, отправленные только родительскому. Это целевое событие, которое будет родительским компонентом.

export class MouseListenerDirective {

  constructor(private el: ElementRef){}

  public enter = this.enterSub.asObservable().pipe(filter(x => x.target === this.el.nativeElement));

...

добавьте эту директиву в родительский компонент

<parent-component appMouseListener>
  <child-component></child-component>
</parent-component>

Получите доступ к событиям в дочернем компоненте, введя директиву

@Component({ // configs}
export class ChildComponent {

  constructor(mouseListener: MouseListenerDirective){
    mouseListener.enter.subscribe(x => console.log(x)); // don't forget to manage subscriptions
  }
}