踩坑实录---Angular防抖——点击事件
npx ng g directive DebounceClickDirective --module=app
然后自动生成了2 个文件
CREATE src/app/debounce-click-directive.directive.spec.ts (290 bytes) CREATE src/app/debounce-click-directive.directive.ts (173 bytes)
检查一下
debounce-click-directive.directive.spec.ts
import { Directive, OnInit, HostListener, Output, EventEmitter, OnDestroy, Input, HostBinding } from '@angular/core'; import { Subject, Subscription } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; @Directive({ selector: '[appDebounceClick]' }) export class DebounceClickDirective implements OnInit, OnDestroy { @Input('appDebounceClick') debounceTime = 500; @Output() debounceClick = new EventEmitter(); private clicks = new Subject<any>(); private subscription: Subscription; constructor() { } ngOnInit() { 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); } @HostBinding() test() { // } }
再检查一下app.module.ts
src/app/
import { DebounceClickDirective } from './debounce-click-directive.directive';@NgModule({ declarations: [AppComponent, DebounceClickDirective],
注意啊!!这里有个坑,有的项目是分模块的,注册到app.module有的时候也是不管用的,你需要注册到距离你需要用到的最近的模块,因为这个是按需引入的,
要不然你这个自定义指令是没卵用的哦!!!!
然后很简单
你的html就可以直接使用了
<button (click)="myappDebounceClick()">即刻執行</button> <button appDebounceClick (debounceClick)="myappDebounceClick()">使用默認時間間隔來執行</button> <button appDebounceClick (debounceClick)="myappDebounceClick()" [debounceTime]="2000">自定義時間執行Debounced12 Click</button>
再放一次自定义指令文件代码
import { Directive, EventEmitter, HostListener, OnInit, Output, Input } from '@angular/core'; import { Subject } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; import { Subscription } from 'rxjs'; @Directive({ selector: '[appDebounceClick]' }) export class DebounceClickDirective implements OnInit { @Input() debounceTime = 500; @Output() debounceClick = new EventEmitter(); private clicks = new Subject(); private subscription: Subscription; constructor() { } ngOnInit() { 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); } }
好了,完成了~~ 三种情况自己看吧~
- 上一篇 »一文学会JavaScript如何手写防抖节流?
- 下一篇 »Python踩坑总结