Angular中怎么通過自定義Debounce Click指令防止重復(fù)點(diǎn)擊,針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
成都創(chuàng)新互聯(lián)公司公司2013年成立,先為電白等服務(wù)建站,電白等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為電白企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
該指令將處理在指定時間內(nèi)多次點(diǎn)擊事件,這有助于防止重復(fù)的操作。
對于我們的示例,我們希望在產(chǎn)生點(diǎn)擊事件時,實(shí)現(xiàn)去抖動處理。接下來我們將介紹 Directive API,HostListener API 和 RxJS 中 debounceTime 操作符的相關(guān)知識。首先,我們需要創(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)聽宿主元素上的事件。在我們的示例中,第一個參數(shù)是事件名。第二個參數(shù) $event
,這用于告訴 Angular 將點(diǎn)擊事件傳遞給我們的 clickEvent()
方法。
在事件處理函數(shù)中,我們可以調(diào)用 event.preventDefault()
和 event.stopPropagation()
方法來阻止瀏覽器的默認(rèn)行為和事件冒泡。
Debounce Events
現(xiàn)在我們可以攔截宿主元素的 click
事件,此時我們還需要有一種方法實(shí)現(xiàn)事件的去抖動處理,然后將它重新發(fā)送回父節(jié)點(diǎn)。這時我們需要借助事件發(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)擊事件,我們想做去抖動處理。為了實(shí)現(xiàn)這個功能,我們將使用 RxJS 中的 Subject 類。在我們的代碼中,我們創(chuàng)建一個主題來處理我們的點(diǎn)擊事件。在我們的方法中,我們調(diào)用 next()
方法來讓 Subject 對象發(fā)出下一個值。此外我們也使用 RxJS 中 debounceTime
的操作符,這允許我們通過設(shè)置給定的毫秒數(shù)來去抖動點(diǎn)擊事件。
一旦我們設(shè)置好了,我們現(xiàn)在可以在下面的模板中監(jiān)聽我們的自定義去抖動點(diǎn)擊事件。
<button appDebounceClick (debounceClick)="log($event)"> Debounced Click </button>
現(xiàn)在,當(dāng)我們點(diǎn)擊我們的按鈕時,它將延遲 500 毫秒。 500毫秒后,我們的自定義輸出屬性將會發(fā)出點(diǎn)擊事件。現(xiàn)在我們有了基本的功能,我們需要做一些清理工作,并增加一些其它的功能。
Unsubscribe
對于 RxJS 中 Observables 和 Subject 對象,一旦我們不再使用它們,我們必須取消訂閱事件。如果我們沒有執(zhí)行取消訂閱操作,有可能會出現(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); } }
要取消訂閱,我們需要保存訂閱時返回的訂閱對象。當(dāng) Angular 銷毀組件時,它將調(diào)用 OnDestroy
生命周期鉤子,因此我們可以在這個鉤子中,執(zhí)行取消訂閱操作。
Custom Inputs
我們指令的功能已基本齊全,它可以正常處理事件。接下來,我們將添加一些更多的邏輯,以便我們可以自定義去抖動時間。為此,我們將使用 @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
裝飾器允許我們將自定義延遲時間傳遞到我們的組件或指令中。在上面的代碼中,我們可以通過組件的輸入屬性,來指定我們希望去抖動的時間。默認(rèn)情況下,我們將其設(shè)置為 500 毫秒。
<button appDebounceClick (debounceClick)="log($event)" [debounceTime]="300"> Debounced Click </button>
關(guān)于Angular中怎么通過自定義Debounce Click指令防止重復(fù)點(diǎn)擊問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。
本文題目:Angular中怎么通過自定義DebounceClick指令防止重復(fù)點(diǎn)擊
文章URL:http://muchs.cn/article48/ihsohp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、ChatGPT、品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)