时间戳

首页 > 解决方案 > 访问组件模板中的指令变量

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

问题描述

我有这个指令 =>

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

标签： angulardirective

解决方案

像这样的东西可以工作

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

在CSS中

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

推荐阅读