angular中，防⽌按钮的两次点击
在我的项⽬中，⽤户点击按钮后，如果⽹页响应慢⼀点，⽤户常会再次点击⼀下。结果就触发了两次 click 操作。 如果是查询还好，但如果是post,put请求时，可能就是⼤问题了。
⽅案⼀：
南岩宫由于我⽤的是ng-zorro, ⽅案⼀是在组件中增加⼀个 isLoading=fal 的变量， 按钮上指定它的 nzLoading="isLoading" 。 zorro ⽂档截图：
打印机喷头清洗在click事件中：
doSomeClick(){
this.isLoading=true;
atexxxx().subscribe( ()=> this.isLoading=fal );
}
问题：口红颜色大全
1、页⾯上如果有多个button话，且都绑定到⼀个isLoading变量， 则在点击⼀个按钮时，所有按钮都禁⽤了。如果想每个按钮单独控制，那就需要为每个按钮分配⼀个变量，这样会引⼊⾮常多的变量，也是⿇烦事。
吹牛相声
⽅案⼆：
利⽤throttleTime 来防⽌⽤户两次点击，且希望⽤法改动⾮常⼩，⽐如
原来代码： (click)="login()"爱慕官方
新代码 : ()="login()"
所以我们实现⼀个 的指令即可：
import { Directive, Input, OnDestroy, OnInit, HostListener, Output, EventEmitter, Renderer2, ElementRef } from '@angular/core';
import { throttleTime } from 'rxjs/operators';
import { Subject, Subscription } from 'rxjs';
@Directive({
// tslint:disable-next-line:directive-lector
lector: '[]'
})
export class OnceClickDirectiveDirective implements OnInit, OnDestroy {
// tslint:disable-next-line:no-output-rename
@Output('') clickCall: EventEmitter<MouEvent> = new EventEmitter();
@Input() duration = 2000; // 必须是数字，传⼊时要⽤绑定语法
private $sub = new Subject<any>();
private subscription: Subscription;
constructor(
private renderer: Renderer2, // Angular 2.x导⼊Renderer
private element: ElementRef
) { }
ngOnInit() {
// 如此绑定事件亦可
// derer.listen(
// this.element.nativeElement, 'click', event => {
// event.preventDefault();
// event.stopPropagation();
// this.$(event);
光年之外邓紫棋// }
/
/ );
this.subscription = this.$sub.pipe(唯独>吃药能喝茶叶吗
throttleTime(this.duration)
).subscribe(e => {
it(e);
});
}
@HostListener('click', ['$event'])
clickEvent(event: MouEvent) {
event.preventDefault(); // 通常是不需要冒泡的
event.stopPropagation();
this.$(event);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
代码⾥的时间间隔设置2秒， 通常接⼝在这个时间内都能返回结果了。
优化：
1、这个实现没有任何禁⽤状态的效果， ⽤户可以连续点击，不过只响应⼀次。
如果点击后想产⽣遮罩层，可以在根组件中添加⼀个变量控制这个层的显⽰，然后引⼊⼀个全局的rvice来注册⼀个Subject对象。当点击时，就向subject对象emit() ⼀下，然后定时再清除遮罩层。
我懒得⿇烦。就不添加了！
