1.新建debounce-click 指令
2.directives/debounce-click.directive.ts
import { Directive, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
@Directive({
selector: '[appDebounceClick]'
})
export class DebounceClickDirective {
@Input() debounceTime = 500;
@Output() debounceClick = new EventEmitter();
private clicks = new Subject();
private subscription: Subscription;
constructor() {
}
ngOnInit(): void {
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);
}
}
3.如何使用
新建公共ts文件 modules/share/share.module.ts 将所有指令及管道引入
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DebounceClickDirective } from '../../directives/debounce-click.directive';
import { HtmlpipePipe } from '../../pipe/htmlpipe.pipe';
@NgModule({
declarations: [
DebounceClickDirective,
HtmlpipePipe
],
imports: [
CommonModule
],
exports: [
DebounceClickDirective,
HtmlpipePipe
]
})
export class ShareModule { }
4.在login页面login.module.ts文件中引入ShareModule
// 防抖指令
import { ShareModule } from '../../modules/share/share.module';
imports: [
ShareModule
],
5.login.page.html页面使用
<ion-button class="login_btn" shape="round" expand="block" appDebounceClick [debounceTime]="500"
(debounceClick)="goPwdLogin()" [ngClass]="{'corect':ajxphone && ajxpwd}" disabled="{{!ajxphone || !ajxpwd}}">登录
</ion-button>