angular4 防二次重复点击

Posted aerfajj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angular4 防二次重复点击相关的知识,希望对你有一定的参考价值。

监听click事件,
默认三秒钟内的点击事件触发第一次的点击事件,也可以通过throttleTime自定义时间 只触发第一次

    
    /**
 * <div  (throttleClick)="goExceptionReport()" [throttleTime]="5000">throttleClick 5 S</div>
 * <div  (throttleClick)="goExceptionReport()">throttleClick default</div>
 * <div tappable (throttleClick)="goExceptionReport()">throttleClick default with tappable</div>
 */
import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from "@angular/core";
import { Subject } from "rxjs/Subject";
import { Subscription } from "rxjs/Subscription";

@Directive( {
  selector: "[throttleClick]",
} )
export class ThrottleClickDirective implements OnInit, OnDestroy {
  @Input() public throttleTime = 3000;
  @Output() public throttleClick = new EventEmitter();
  private clicks = new Subject<any>();
  private subscription: Subscription;

  constructor() {}

  ngOnInit() {
    // 拦截点击事件只传递第一次点击事件的处理操作交给parent来处理
    this.subscription = this.clicks
      .throttleTime( this.throttleTime )
      .subscribe(( e ) => this.throttleClick.emit( e ) );
  }

  ngOnDestroy() {
    // 取消订阅
    this.subscription.unsubscribe();
  }

  // HostListener这个装饰器可以监听directive作用的dom元素的click事件,第二个参数$event告诉Angular传递点击事件到directive中去;
  @HostListener( "click", [ "$event" ] )
  clickEvent( event: MouseEvent ) {
    // 防止事件继续向parent component中传递
    event.preventDefault();
    event.stopPropagation();
    // 这里使用subject的.next来传递点击事件,然后使用rxjs的函数操作符throttleTime来处理延时事件,在指定事件内只处理第一次操作,调用emit传递点击事件的操作到parent中去继续处理;
    this.clicks.next( event );
  }
}
    

默认三秒钟内的点击事件触发最后一次的点击事件,也可以通过debounceTime自定义时间 只触发最后一次


    import { Directive, EventEmitter, HostListener, OnInit, Output, Input } from '@angular/core';  
    import { Subject } from 'rxjs/Subject';  
    import { debounceTime } from 'rxjs/operators';  
    import {Subscription} from 'rxjs/Subscription';  

    @Directive({  
        selector: '[appDebounceClick]'  
    })  
    export class DebounceClickDirective implements OnInit {  
        @Input() debounceTime = 500;  
        @Output() debounceClick = new EventEmitter();  
        private clicks = new Subject();  
        private subscription: Subscription;  

        constructor() { }  

        ngOnInit() {  
            // 拦截点击事件然后延迟这些点击事件的执行,直到一段时间内最后一次点击,最后把事件的处理操作交给parent来处理
            this.subscription = this.clicks.pipe(  
                debounceTime(this.debounceTime)  
            ).subscribe(e => this.debounceClick.emit(e));  
        }  

        ngOnDestroy() {  
            this.subscription.unsubscribe();  
        }  

        @HostListener('click', ['$event'])  
        clickEvent(event) {  
            event.preventDefault();  
            event.stopPropagation();  
            this.clicks.next(event);  
        }  
    }

以上是关于angular4 防二次重复点击的主要内容,如果未能解决你的问题,请参考以下文章

量角器测试在第二次运行中因ng-reflect属性而失败

播放随机声音而不重复

小5聊C# Winform窗体,程序点击运行第二次自动判断显示,解决不重复打开两个相同窗体

js函数的节流和防抖

片段中的 EditText 上的空指针异常 [重复]

第二次在对话框中膨胀片段时出错