Angular中自定義Debounce Click指令防止重復(fù)點(diǎn)擊
在這篇文章中，我們將介紹使用 Angular Directive API 來創(chuàng)建自定義 debounce click 指令。該指令將處理在指定時(shí)間內(nèi)多次點(diǎn)擊事件，這有助于防止重復(fù)的操作。
對于我們的示例，我們希望在產(chǎn)生點(diǎn)擊事件時(shí)，實(shí)現(xiàn)去抖動(dòng)處理。接下來我們將介紹 Directive API，HostListener API 和 RxJS 中 debounceTime 操作符的相關(guān)知識。首先，我們需要?jiǎng)?chuàng)建 DebounceClickDirective 指令并將其注冊到我們的 app.module.ts 文件中：
import { Directive, OnInit } from '@angular/core';
@Directive({
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
constructor() { }
ngOnInit() { }
}
@NgModule({
imports: [BrowserModule],
declarations: [
AppComponent,
DebounceClickDirective
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular 指令是沒有模板的組件，我們將使用以下方式應(yīng)用上面的自定義指令：
<button appDebounceClick>Debounced Click</button>
在上面 HTML 代碼中的宿主元素是按鈕，接下來我們要做的第一件事就是監(jiān)聽宿主元素的點(diǎn)擊事件，因此我們可以將以下代碼添加到我們的自定義指令中。
import { Directive, HostListener, OnInit } from '@angular/core';
@Directive({
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
constructor() { }
ngOnInit() { }
@HostListener('click', ['$event'])
clickEvent(event: MouseEvent) {
event.preventDefault();
event.stopPropagation();
console.log('Click from Host Element!');
}
}
在上面的例子中，我們使用了 Angular @HostListener 裝飾器，該裝飾器允許你輕松地監(jiān)聽宿主元素上的事件。在我們的示例中，第一個(gè)參數(shù)是事件名。第二個(gè)參數(shù) $event，這用于告訴 Angular 將點(diǎn)擊事件傳遞給我們的 clickEvent() 方法。
在事件處理函數(shù)中，我們可以調(diào)用 event.preventDefault() 和 event.stopPropagation() 方法來阻止瀏覽器的默認(rèn)行為和事件冒泡。
Debounce Events
現(xiàn)在我們可以攔截宿主元素的 click 事件，此時(shí)我們還需要有一種方法實(shí)現(xiàn)事件的去抖動(dòng)處理，然后將它重新發(fā)送回父節(jié)點(diǎn)。這時(shí)我們需要借助事件發(fā)射器和 RxJS 中的 debounce 操作符。
import { Directive, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
@Directive({
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
@Output() debounceClick = new EventEmitter();
private clicks = new Subject<any>();
constructor() { }
ngOnInit() {
this.clicks
.debounceTime(500)
.subscribe(e => this.debounceClick.emit(e));
}
@HostListener('click', ['$event'])
clickEvent(event: MouseEvent) {
event.preventDefault();
event.stopPropagation();
this.clicks.next(event);
}
}
在上面的代碼中，我們使用 Angular @Output 屬性裝飾器和 EventEmitter 類，它們允許我們在指令上創(chuàng)建自定義事件。要發(fā)出事件，我們需要調(diào)用 EventEmitter 實(shí)例上的 emit() 方法。
但我們不想立即發(fā)出點(diǎn)擊事件，我們想做去抖動(dòng)處理。為了實(shí)現(xiàn)這個(gè)功能，我們將使用 RxJS 中的 Subject 類。在我們的代碼中，我們創(chuàng)建一個(gè)主題來處理我們的點(diǎn)擊事件。在我們的方法中，我們調(diào)用 next() 方法來讓 Subject 對象發(fā)出下一個(gè)值。此外我們也使用 RxJS 中 debounceTime 的操作符，這允許我們通過設(shè)置給定的毫秒數(shù)來去抖動(dòng)點(diǎn)擊事件。
一旦我們設(shè)置好了，我們現(xiàn)在可以在下面的模板中監(jiān)聽我們的自定義去抖動(dòng)點(diǎn)擊事件。
<button appDebounceClick (debounceClick)="log($event)"> Debounced Click </button>
現(xiàn)在，當(dāng)我們點(diǎn)擊我們的按鈕時(shí)，它將延遲 500 毫秒。 500毫秒后，我們的自定義輸出屬性將會(huì)發(fā)出點(diǎn)擊事件?，F(xiàn)在我們有了基本的功能，我們需要做一些清理工作，并增加一些其它的功能。
Unsubscribe
對于 RxJS 中 Observables 和 Subject 對象，一旦我們不再使用它們，我們必須取消訂閱事件。如果我們沒有執(zhí)行取消訂閱操作，有可能會(huì)出現(xiàn)內(nèi)存泄漏。
import { Directive, EventEmitter, HostListener, OnInit, Output, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Subscription } from "rxjs/Subscription";
import 'rxjs/add/operator/debounceTime';
@Directive({
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
@Output() debounceClick = new EventEmitter();
private clicks = new Subject<any>();
private subscription: Subscription;
constructor() { }
ngOnInit() {
this.subscription = this.clicks
.debounceTime(500)
.subscribe(e => this.debounceClick.emit(e));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
@HostListener('click', ['$event'])
clickEvent(event: MouseEvent) {
event.preventDefault();
event.stopPropagation();
this.clicks.next(event);
}
}
要取消訂閱，我們需要保存訂閱時(shí)返回的訂閱對象。當(dāng) Angular 銷毀組件時(shí)，它將調(diào)用 OnDestroy 生命周期鉤子，因此我們可以在這個(gè)鉤子中，執(zhí)行取消訂閱操作。
Custom Inputs
我們指令的功能已基本齊全，它可以正常處理事件。接下來，我們將添加一些更多的邏輯，以便我們可以自定義去抖動(dòng)時(shí)間。為此，我們將使用 @Input 裝飾器。
import { Directive, EventEmitter, HostListener, OnInit, Output, OnDestroy, Input } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Subscription } from "rxjs/Subscription";
import 'rxjs/add/operator/debounceTime';
@Directive({
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
@Input() debounceTime = 500;
@Output() debounceClick = new EventEmitter();
private clicks = new Subject<any>();
private subscription: Subscription;
constructor() { }
ngOnInit() {
this.subscription = this.clicks
.debounceTime(this.debounceTime)
.subscribe(e => this.debounceClick.emit(e));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
@HostListener('click', ['$event'])
clickEvent(event: MouseEvent) {
event.preventDefault();
event.stopPropagation();
this.clicks.next(event);
}
}
@Input 裝飾器允許我們將自定義延遲時(shí)間傳遞到我們的組件或指令中。在上面的代碼中，我們可以通過組件的輸入屬性，來指定我們希望去抖動(dòng)的時(shí)間。默認(rèn)情況下，我們將其設(shè)置為 500 毫秒。
<button appDebounceClick (debounceClick)="log($event)" [debounceTime]="300"> Debounced Click </button>
參考資源
creating-a-custom-debounce-click-directive-in-angular
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular中ng-template和ng-container的應(yīng)用小結(jié)
Angular的日常工作中經(jīng)常會(huì)使用到ng-template和ng-container，本文對他們做一個(gè)總結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-06-06
這篇文章給大家介紹了angularjs中controller的三種寫法，每種寫法都給出了示例代碼，對大家理解和學(xué)習(xí)很有幫助，有需要的朋友們可以參考借鑒。2016-09-09
詳解ng-alain動(dòng)態(tài)表單SF表單項(xiàng)設(shè)置必填和正則校驗(yàn)
這篇文章主要介紹了詳解ng-alain動(dòng)態(tài)表單SF表單項(xiàng)設(shè)置必填和正則校驗(yàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
本文主要介紹AngularJs E2E Testing的資料，這里整理了詳細(xì)的資料，及簡單代碼示例，有興趣的小伙伴可以參考下2016-09-09
這篇文章主要介紹了詳解Angular6.0使用路由步驟(共7步)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
詳解Angular系列之變化檢測(Change Detection)
這篇文章主要介紹了詳解Angular系列之變化檢測(Change Detection)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Angular 是一個(gè)流行的框架，用于構(gòu)建動(dòng)態(tài)和響應(yīng)式 Web 應(yīng)用程序，在本文中，我們將討論延遲加載以及它如何與 Angular 中的路由一起工作，感興趣的可以跟隨小編一起學(xué)習(xí)一下2023-06-06
今天小編就為大家分享一篇AngularJS發(fā)送異步Get/Post請求方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
詳解基于Bootstrap+angular的一個(gè)豆瓣電影app
本篇文章主要介紹了基于Bootstrap+angular的一個(gè)豆瓣電影app ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
AngularJS入門教程之MVC架構(gòu)實(shí)例分析
這篇文章主要介紹了AngularJS的MVC架構(gòu),結(jié)合實(shí)例形式重點(diǎn)分析了ng-controller聲明并使用控制器的操作技巧與控制器作用域的相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11