Question

我有一个按钮和一条指令。

可以通过模板本身（取决于参数）和指令（在双击的情况下禁用该按钮）来禁用按钮

这里代码示例=>

    <button mat-button *ngFor="let button of buttons" 
        [disabled]="(button.type === 'confirmation') && IsAnyConfirmationInvalid()">
        {{button.text}}
    </button>

基本上，如果此按钮是类型确认，则此按钮处于禁用状态，并且确认无效。有效

然后我添加我的指令

        <button mat-button *ngFor="let button of buttons" 
            [disabled]="(button.type === 'confirmation') && IsAnyConfirmationInvalid()"
            appThrottleClick 
            (click)="button.action();" 
            [throttleTime]="1000">
            {{button.text}}
        </button>

指令代码=>

export class ThrottleClickDirective implements OnInit, OnDestroy {

    @HostBinding('attr.disabled') disabled : boolean;

    @Input() 
    throttleTime = 1000;

    @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) {
        event.preventDefault();
        event.stopPropagation();
        this.disabled = true;
        this.clicks.next(event);
        setTimeout(() => {this.disabled = null;}, this.throttleTime)      
    }
}

我希望我的按钮在相同条件（类型确认）为真的情况下被禁用，但从指令中也要禁用，以防万一我单击，必须将其禁用，这样我才能双击。

目前的问题是，仅考虑指令，因此单击时我的按钮始终处于启用状态。

如何使Booth一起禁用cohexist？

Answer 1

使用中间变量=>

固定

    <button mat-button *ngFor="let button of buttons" 
        appThrottleClick 
        [throttleDisabled]="(button.type === 'confirmation') && IsAnyConfirmationInvalid()"
        (throttleClick)="button.action();" 
        [throttleTime]="1000">
        {{button.text}}
    </button>

还有

@HostBinding('disabled') disabled : boolean;

@Input() 
throttleTime = 1000;

@Input() 
set throttleDisabled(val : boolean) {
    console.log(val)
    this.disabled = val;
}

指令正在更改父级禁用属性

1 个答案: