Angular 2 RxJS检查延迟后鼠标事件是否仍然有效

发布时间：2020-12-17 17:44:14 所属栏目：安全来源：网络整理

导读：我正在使用Angular 2来制定指令.我有以下事件绑定到主机组件： host: { '(mouseenter)': 'onMouseEnter($event)','(mouseleave)': 'onMouseLeave($event)'} 我还在指令上创建了两个流和监听器来管理这两个事件 export class PopupDirective { private _mouse

我正在使用Angular 2来制定指令.我有以下事件绑定到主机组件：

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

我还在指令上创建了两个流和监听器来管理这两个事件

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

我希望只有在一个固定的延迟(即没有发生mouseleave)之后mouseenter事件仍处于活动状态时才调用我的订阅.我尝试这样做,但它不起作用(这是有道理的,我只是不知道如何解决它).

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

有Angular 2 / RxJS经验的人是否知道如何处理这个问题？

解决方法

Günter的答案正是您所期望的,但您应该使用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.

此外,还有a proposal in Angular旨在通过模板语法简化使用Rx从DOM事件创建可观察对象的方式.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!