Angular 2 RxJS comprueba si el evento del mouse sigue activo después del retraso
Estoy usando Angular 2 para hacer una directiva. Tengo los siguientes eventos vinculados al componente host:
host: {
'(mouseenter)': 'onMouseEnter($event)',
'(mouseleave)': 'onMouseLeave($event)'
}
También creé dos transmisiones y escuchas en la directiva para administrar los dos eventos.
export class PopupDirective {
private _mouseEnterStream: EventEmitter<any> = new EventEmitter();
private _mouseLeaveStream: EventEmitter<any> = new EventEmitter();
onMouseEnter($event) {
this._mouseEnterStream.emit($event);
}
onMouseLeave($event) {
this._mouseLeaveStream.emit($event);
}
}
Quiero misubscribe
para ser llamado solo si elmouseenter
el evento aún está activo después de un retraso fijo (es decir, unmouseleave
no ha ocurrido). Intenté hacerlo de esta manera, pero no funciona (lo cual tiene sentido, simplemente no sé cómo solucionarlo).
this._mouseEnterStream.flatMap((e) => {
return Observable
.of(e)
.takeUntil(this._mouseLeaveStream);
}).delay(2000).subscribe(
() => console.log('yay, it worked!')
);
¿Alguien con experiencia en Angular 2 / RxJS sabe cómo debería abordar esto?