指令正在更改父禁用属性答案

【问题标题】：Directive is changing parent disable attribute指令正在更改父禁用属性
【发布时间】：2019-09-05 03:13:41
【问题描述】：

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

该按钮可以由模板自己禁用（取决于参数），也可以由指令禁用（在双击的情况下禁用）

这里的代码示例 =>

    <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)      
    }
}

如果相同的条件（类型确认）为真，我希望我的按钮被禁用，但也从指令中，如果我点击，它必须被禁用，所以我不能双击。

问题是，目前只考虑指令，所以当我点击时，我的按钮总是启用期望。

我如何让展位一起禁用 cohexist ？

【问题讨论】：

标签： angular

【解决方案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;
}

【讨论】：