Ich benutze Angular 2, um eine Direktive zu erstellen. Ich habe die folgenden Ereignisse an die Host-Komponente gebunden:

host: {
    '(mouseenter)': 'onMouseEnter($event)',
    '(mouseleave)': 'onMouseLeave($event)'
}

ch habe auch zwei Streams und Listener für die Direktive erstellt, um die beiden Ereignisse zu verwalte

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);
    }
}

Ich will meinsubscribe soll nur aufgerufen werden, wenn dasmouseenteras @ -Ereignis ist nach einer festen Verzögerung immer noch aktiv (d. h. einmouseleave ist nicht aufgetreten). Ich habe versucht, es auf diese Weise zu tun, aber es funktioniert nicht (was Sinn macht, ich weiß nur nicht, wie ich es beheben soll).

this._mouseEnterStream.flatMap((e) => {
  return Observable
    .of(e)
    .takeUntil(this._mouseLeaveStream);
}).delay(2000).subscribe(
  () => console.log('yay, it worked!')
);

Weiß jemand mit Angular 2 / RxJS-Erfahrung, wie ich das angehen soll?