ionic4 click防抖指令

案例: 一个登陆页面，连续多次点击登陆按钮，会造成多次触发提交事件，解决方式很多，但是感觉指令方式使用起来更简单，代码更简洁。

自定义click防抖指令

1.ionic4 内置指令生成一个空的指令

ionic g directive directives/debounce-click

生成文件如下:

2.书写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 implements OnInit {
    @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();
        console.log('Click from Host Element!');
        this.clicks.next(event);
    }

}

3.登录页使用自定义的指令

• 1）在login.module.ts的声明中引入自定义的click指令



• 2）login.html页面中使用



• 其中login方法就是实现提交时候写的方法，在login.page.ts中



• 3）测试
  ok，就不截图了

自此，大工告成！！