案例: 一个登陆页面，连续多次点击登陆按钮，会造成多次触发提交事件，解决方式很多，但是感觉指令方式使用起来更简单，代码更简洁。
自定义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，就不截图了
自此，大工告成！！
