我正在使用 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 经验的人知道我应该如何处理这个问题吗?
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);
}
);
查看相应的plunker:https://plnkr.co/edit/vP3xRDXxFanqzLEKd3eo?p=preview https://plnkr.co/edit/vP3xRDXxFanqzLEKd3eo?p=preview.
另外,还有Angular 中的提案 https://github.com/angular/angular/issues/13248旨在简化使用 Rx 通过模板语法从 DOM 事件创建可观察对象的方式。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)