我正在使用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);
}
}
我希望仅当mouseenter
事件在固定延迟后仍处于活动状态(即未发生mouseleave
)时,才调用我的subscribe
。我尝试这样做,但它不起作用(这是有道理的,我只是不知道如何解决它)。
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
运算符而不是不存在的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 事件创建可观察量的方式。
看起来与如何在 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 可用的这些匹配。