角2 RxJS检查，如果鼠标事件仍然是活动的延迟之后

问题描述

我用角2作出指令。我有以下事件绑定到主机组件：

I'm using Angular 2 to make a directive. I have the following events bound to the host component:

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

我还创建了有关该指令的两个流和听众来管理两个事件

I also created two streams and listeners on the directive to manage the two events

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

我希望我的订阅如果的mouseenter 事件一个固定的延时后依然活跃，只被称为（即，一个鼠标离开未发生）。我试图做这种方式，但它不工作（这是有道理的，我只是不知道如何解决它）。

I want my subscribe to only be called if the mouseenter event is still active after a fixed delay (i.e., a mouseleave hasn't occured). I tried doing it this way, but it doesn't work (which makes sense, I just don't know how to fix it).

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

有谁有角2 / RxJS经验，知道应该怎么处理这个？

Does anyone with Angular 2 / RxJS experience know how I should approach this?

推荐答案

的君特的回答是你期待什么，但你应该使用，而不是<$的的运营商C $ C>收益一个不存在的。

The Günter's answer is exactly what you expect but you should use the of operator instead of the return one that doesn't exist.

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：。

See the corresponding plunkr: https://plnkr.co/edit/vP3xRDXxFanqzLEKd3eo?p=preview.

否则，在Angular2 GitHub的一项建议，简单的方式来使用附加在接收DOM事件obsersables：的

Otherwise there is a proposal in the Angular2 github to simply the way to attach obsersables on DOM events using Rx: https://github.com/angular/angular/issues/4062

这篇关于角2 RxJS检查，如果鼠标事件仍然是活动的延迟之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！