7

我正在使用 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事件在固定延迟后仍处于活动状态（即 amouseleave尚未发生）时才被调用。我试过这样做，但它不起作用（这是有道理的，我只是不知道如何解决它）。

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

有 Angular 2 / RxJS 经验的人知道我应该如何解决这个问题吗？

4

2 回答 2

5

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 。

此外，Angular 中有一个提案旨在简化使用 Rx 通过模板语法从 DOM 事件创建可观察对象的方式。

于 2016-02-10T08:27:51.820 回答
3

看起来与如何在 RxJS 中超时事件非常相似？

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

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

我自己不使用 TS 或 Rx（只有 Dart），因此我不知道这是否是正确的语法，或者运算符的名称是否与 Angular 可用的这些匹配。

于 2016-02-10T06:06:43.977 回答