角2遅れてマウスイベントがまだアクティブであるかどうかを確認します。

Question

私は、ディメンションを作成するために角2を使用しています。私は、次のイベントは、ホストコンポーネントにバインドされています：私はまた、2つのイベント

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

私が欲しいを管理するためのディレクティブ上の2つのストリームとリスナーを作成し

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

私の場合にのみ呼び出されsubscribeにmouseenterイベントは一定の遅延の後でもまだアクティブです（つまり、mouseleaveが発生していません）。私はこのようにしてみましたが、うまくいきません（それは意味があります、私はそれを修正する方法が分かりません）。

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

Angular 2/RxJSの経験がある方は、私がこれにどのようにアプローチすべきか知っていますか？

Answer 1

Günterの答えはまさに期待通りですが、存在しないreturnの代わりにof演算子を使用する必要があります。

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

対応するplunkr：https://plnkr.co/edit/vP3xRDXxFanqzLEKd3eo?p=previewを参照してください。 https://github.com/angular/angular/issues/4062

Answer 2

How do I timeout an event in RxJS?私はTSまたはRxの自分（だけダート）、これは事業者の名称正しい構文の場合、または場合ので、私は知らないを使用していない

this.myStream = this._mouseEnterStream 
    .flatMap((e) => { 
     return Observable 
      .of(e) 
      .delay(2000) 
      .takeUntil(mouseLeaveStream); 
    }); 

myStream.subscribe((x) => { 
     console.log('onNext: ', x); 
}); 

と非常に似ていますAngularに対応しています。