Question

我使用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);
    }
}

我希望仅在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的答案正是您所期望的，但您应该使用of运算符而不是return运算符。

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事件创建可观察对象的方式。

Answer 2

看起来与How do I timeout an event in RxJS?

非常相似

localstorage

我自己不使用TS或Rx（仅限Dart），因此我不知道这是正确的语法，还是运营商的名称与Angular可用的名称相匹配。

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

2 个答案: