Açısal 2 RxJS

Question

Gecikmesinden sonra fare olayının hala etkin olup olmadığını kontrol etmek için Angular 2 kullanıyorum. Aşağıdaki olaylar konak bileşenine bağlı adres: Ben de iki etkinlik

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

istediğim yönetmek için direktif iki dere ve dinleyici oluşturulan

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

benim yalnızca çağrılabilir subscribe için mouseenter olayı, sabit bir gecikmeden sonra aktiftir (yani, mouseleave oluşmamış). Bu şekilde yapmaya çalıştım, ama işe yaramıyor (mantıklı olanı, sadece nasıl tamir edeceğimi bilmiyorum).

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

Angular 2/RxJS deneyimine sahip olan herkes bunu nasıl ele almam gerektiğini biliyor mu?

Answer 1

Günter'in yanıtı tam olarak beklediğiniz şeydir, ancak mevcut olmayan return yerine of işlecini kullanmalısınız.

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

gelen plunkr bakınız: https://plnkr.co/edit/vP3xRDXxFanqzLEKd3eo?p=preview. https://github.com/angular/angular/issues/4062

Answer 2

Ben TS kullanmak ya da kendimi (sadece Dart) RX Bu doğru sözdizimi veya eğer varsa, bu nedenle bilmiyorum yok How do I timeout an event in RxJS?

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

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

oldukça benzer görünüyor operatörlerin adı Angular için mevcut ile maç.