Tengo muchos componentes que están uno encima del otro, y necesito agregar un oyente para que cuando el puntero del mouse esté dentro de los límites de estos componentes, cada componente haga algo.
Probé con mouseover, mouseenter, mousemove, etc. pero estos eventos solo funcionan en el componente que está en la parte superior, no en todos. ex html:
<div class="container"> <app-child></app-child> <app-child></app-child> <app-child></app-child> <app-child></app-child> </div>ex css:
.container > * { position: absolute; left: 0; top: 0; width: 100px; height: 100px; border: 1px solid black; }ex app-child.component.ts
@Component({ selector: 'app-child', template: '<div></div>' }) ChildComponent { // Here some function that needs to run if mouse pointer is in bound of this element }si quieres que los niños hagan algo
padre.componente.html
<div class="container" (mouseenter)="doSomethingFunction()" (mouseleave)="stopDoSomething()> <app-child [doSomething]="doSomething"></app-child> <app-child [doSomething]="doSomething"></app-child> <app-child [doSomething]="doSomething"></app-child> <app-child [doSomething]="doSomething"></app-child> </div>padre.componente.ts
@Component({ selector: 'app-child', template: '<div></div>' }) ParentComponent { doSomething = false; doSomethingFunction(e) { doSomething = true; } stopDoSomething(e) { doSomething = false; } }child.component.ts
@Component({ selector: 'app-child', template: '<div></div>' }) ChildComponent { @Input() doSomething: boolean ngOnInit() { if(doSomething) { doSomethingElse(); } else { stopDoingThings(); } } }si hay que hacerle algo a los niños
padre.componente.html
<div class="container" (mouseenter)="doSomething($event)"> <app-child></app-child> <app-child></app-child> <app-child></app-child> <app-child></app-child> </div>padre.componente.ts
@Component({ selector: 'app-child', template: '<div></div>' }) ParentComponent { doSomething(e) { for(const child in Array.from(e.target.children) { doSomethingElse(child); } } }