stackblitz
录了个视频玩
思路
- 监听到鼠标按下后发出一个流
- 将这个流转接到一个定时产出的流,
-
通过监听这个流得知鼠标按下的时间,
- 当时间到达时取消订阅。
- 当鼠标抬起时取消订阅。
实作
-
为了达成思路,首先需要两个流:
- 鼠标按下的流:
pushStart$ = new Subject();
- 鼠标抬起的流:
pushOver$ = new Subject();
- 鼠标按下的流:
-
监听鼠标按下,抬起事件。将上述两个流产出。
@HostListener('mousedown') @HostListener('touchstart') pushStart() { this.pushStart$.next('start') console.log('start') } @HostListener('mouseup') @HostListener('mouseleave') @HostListener('touchend') pushOver(){ this.pushOver$.next('over') this.rd2.removeClass(this.el.nativeElement,'vibrate-1') }
-
加入监听流的逻辑,修改pushStart代码如下:
@HostListener('mousedown') @HostListener('touchstart') pushStart() { this.pushStart$.pipe( tap(()=>{ this.rd2.addClass(this.el.nativeElement,'vibrate-1') }), switchMap(() => interval(1000)), tap(time => console.log(time)), takeUntil(this.pushOver$), filter(time => time === 1), take(1) ).subscribe(() => { console.log('done') this.rd2.removeClass(this.el.nativeElement, 'vibrate-1'); const node = this.rd2.parentNode(this.el.nativeElement) this.rd2.removeChild(node,this.el.nativeElement) this.delete.emit('done') }) this.pushStart$.next('start') console.log('start') }
- 在tap中进行样式的添加以及控制台时间的输出,便于调试。
- takeUntil,filter,take(1),使这段流将在鼠标抬起时取消订阅,或者在计时到达1时(鼠标按下经过2秒)发出一个1,使观察者能够知道按压时间已到,以便进行样式,动画的设置,以及删除dom元素等操作。