访问组件模板中的指令变量

Question

我有这个指令=>

export class ThrottleClickDirective implements OnInit, OnDestroy {
    @Input() 
    throttleTime = 500;

    @Output() 
    throttleClick = new EventEmitter();

    public throttling = false;
    private clicks = new Subject();
    private subscription: Subscription;

    constructor() { }

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

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

    @HostListener('click', ['$event'])
    clickEvent(event) {
        event.preventDefault();
        event.stopPropagation();
        this.clicks.next(event);
        this.throttling = true;
    }
}

这是我的模板

    <button mat-button *ngFor="let button of buttons" 
        [ngClass]="[((button.className) ? button.className : ''), 'custom-popup-button']" 
        [disabled]="(button.type === 'confirmation')"
        appThrottleClick 
        (throttleClick)="button.action();" 
        [throttleTime]="500">
        {{button.text}}
    </button>

我想要禁用我的按钮，如果但throttling当前是真的(以便它显示点击已被考虑在内)。

有没有办法从模板中访问变量(在指令之外)

这个组件(按钮所在的组件)是一个通用组件，它根据设置而作为不同数量的按钮，所以我不能真正在它上面存储变量。最好的方法是在disable和throttling之间建立某种连接

Answer 1

像这样的东西可能行得通

@HostBinding('class.myDisableClass') throttling:boolean;

在css中

.myDisableClass button{
   cursor: not-allowed;
   pointer-events: none;
}