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当前为true（这样就表明点击已被考虑。

有没有办法从模板（指令之外）访问该变量

此组件（按钮来自的组件）是通用组件，基于设置，按钮的数量有所不同，因此我无法真正在其上存储变量。最好的方法是在disable和throttling

之间建立某种联系

Answer 1

类似的事情可能会起作用

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

和css

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

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

1 个答案: