踩坑实录-Angular防抖——点击事件 - Powered by Discuz! Archiver

脚踩小金瓶 發表於 2020-3-14 00:22:00

踩坑实录---Angular防抖——点击事件

<div class="cnblogs_code">
<pre>npx ng g directive DebounceClickDirective --module=app</pre>
</div>
然后自动生成了2 个文件
<div class="cnblogs_code">
<pre>CREATE src/app/debounce-click-directive.directive.spec.ts (290 bytes)
CREATE src/app/debounce-click-directive.directive.ts (173 bytes)</pre>
</div>
检查一下
<pre>debounce-click-directive.directive.spec.ts </pre>
<div class="cnblogs_code">
<pre>import {
Directive,
OnInit,
HostListener,
Output,
EventEmitter,
OnDestroy,
Input, HostBinding
} from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Directive({
selector: ''
})
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() {
//
}
}</pre>
</div>
再检查一下app.module.ts
<pre>src/app/</pre>
<div>
<div> </div>
<div>
<div class="cnblogs_code">
<pre>import { DebounceClickDirective } from './debounce-click-directive.directive';

@NgModule({
declarations: ,</pre>
</div>
注意啊！！这里有个坑，有的项目是分模块的，注册到app.module有的时候也是不管用的，你需要注册到距离你需要用到的最近的模块，因为这个是按需引入的，
要不然你这个自定义指令是没卵用的哦！！！！
然后很简单
你的html就可以直接使用了
<div class="cnblogs_code">
<pre><button (click)="myappDebounceClick()">即刻執行</button>
<button appDebounceClick (debounceClick)="myappDebounceClick()">使用默認時間間隔來執行</button>
<button appDebounceClick (debounceClick)="myappDebounceClick()" ="2000">自定義時間執行Debounced12
Click</button></pre>
</div>
再放一次自定义指令文件代码
<div class="cnblogs_code">
<pre>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: ''
})
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);
}
}</pre>
</div>
 
</div>
</div>
好了，完成了~~    三种情况自己看吧~
</audio> 
来源：https://www.cnblogs.com/sugartang/p/12485053.html

頁: [1]

琼殿技术论坛's Archiver

踩坑实录---Angular防抖——点击事件