我正在使用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事件创建可观察对象的方式.
