标签：pre time 简单 his ons 生成 src create des
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);
}
}
好了，完成了~~ 三种情况自己看吧~
标签：pre time 简单 his ons 生成 src create des
原文地址：https://www.cnblogs.com/sugartang/p/12485053.html
