标签：ext dir str sub his loading from operator rip
1.创建指令文件
ng g directive DebounceClickDirective --module=app
2.debounce-click-directive.directive.spec.ts 检查，确保导入正确
3.debounce-click-directive.directive.ts 文件代码
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);
}
}
4.HTML中使用
<button (click)="myappDebounceClick()">即刻執行</button>
<button appDebounceClick (debounceClick)="myappDebounceClick()">使用默認時間間隔來執行</button>
<button appDebounceClick (debounceClick)="myappDebounceClick()" [debounceTime]="2000">自定義時間執行Debounced12
Click</button>
5. 我的是分模块的，所以用的时候，需要把指令导入到shared.module.ts
6.然后需要使用的页面中使用，需要在对应的module.ts中引用shared
原文地址：https://www.cnblogs.com/sugartang/p/12485053.html
标签：ext dir str sub his loading from operator rip
原文地址：https://www.cnblogs.com/zhawei/p/13032735.html
