javascript - 在指令中禁用不重置

Question

关注此Stackblitz

我有一个指令，当您单击时，它应该在特定时间之前禁用该按钮(以防止双击)。

<button appThrottleClick (throttleClick)="click()">
  BUTTON
</button>

<button appThrottleClick [disabled]="myValue" (throttleClick)="click()">
  BUTTON VALUE
</button> 

我希望禁用该按钮，然后在 x 秒后重新启用。在这里使用这个指令:

@Directive({
    selector: '[appThrottleClick]'
})
export class ThrottleClickDirective implements OnInit, OnDestroy {
    @HostBinding('attr.disabled') disabled: boolean;

    @Input() throttleTime = 200;

    @Output() throttleClick = new EventEmitter();

    private clicks = new Subject();
    private subscription: Subscription;

    constructor() { }

    ngOnInit() {
        this.subscription = this.clicks.pipe(
            throttleTime(this.throttleTime)
        ).subscribe(e => {
            this.throttleClick.emit(e);
        });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

    @HostListener('click', ['$event'])
    clickEvent(event) {
        console.log('click')
        if (this.disabled) { return; }
        event.preventDefault();
        event.stopPropagation();
        this.disabled = true;
        this.clicks.next(event);
        setTimeout(() => { this.disabled = false; console.log('reset')}, this.throttleTime);
    }
}

基本上:

如果该按钮未禁用，请单击一次，然后设置冷却时间并再次重新启用它。如果该按钮被禁用，请勿单击。

我面临的问题是，点击并等待冷却后，它再也不会重新启用。即使禁用也设置为 false。

Answer 1

不要使用 @HostBinding 我们使用 ElementRef 来禁用和启用该按钮，这样您的指令将是

import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, HostBinding,ElementRef } from '@angular/core';
import { throttleTime } from 'rxjs/operators';
import { Subject, Subscription } from 'rxjs';

@Directive({
    selector: '[appThrottleClick]'
})
export class ThrottleClickDirective implements OnInit, OnDestroy {
    @Input() throttleTime = 1000;

    @Output() throttleClick = new EventEmitter();

    private clicks = new Subject();
    private subscription: Subscription;

    constructor(private _elementRef:ElementRef) { }

    ngOnInit() {
        this.subscription = this.clicks.pipe(
            throttleTime(this.throttleTime)
        ).subscribe(e => {
            this.throttleClick.emit(e);
        });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

    @HostListener('click', ['$event'])
    clickEvent(event) {
        console.log('click')
        event.preventDefault();
        event.stopPropagation();
        this._elementRef.nativeElement.disabled=true; 
        this.clicks.next(event);
        setTimeout(() => {
          console.log('reset')
           this._elementRef.nativeElement.disabled=false; 
           }, this.throttleTime);
    }
}

demo