stackblitz

录了个视频玩

思路

1. 监听到鼠标按下后发出一个流
2. 将这个流转接到一个定时产出的流，

3. 通过监听这个流得知鼠标按下的时间，

   1. 当时间到达时取消订阅。
   2. 当鼠标抬起时取消订阅。

实作

1. 为了达成思路，首先需要两个流：

   1. 鼠标按下的流：pushStart$ = new Subject();
   2. 鼠标抬起的流：pushOver$ = new Subject();

2. 监听鼠标按下，抬起事件。将上述两个流产出。

   @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')
   }

3. 加入监听流的逻辑，修改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元素等操作。