[英]Access a directive variable in a component template
我有这个指令=>
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
之间建立某种联系
这样的事情可能会起作用
@HostBinding('class.myDisableClass') throttling:boolean;
和在CSS
.myDisableClass button{
cursor: not-allowed;
pointer-events: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.