脚本宝典收集整理的这篇文章主要介绍了在angular里面写一个push delete指令,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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元素等操作。
以上是脚本宝典为你收集整理的在angular里面写一个push delete指令全部内容,希望文章能够帮你解决在angular里面写一个push delete指令所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。