我正在使用自定义指令,我想在点击时修改主机元素的类。每个人都建议使用HostBinding,我试过但仍然无法正常工作。
@HostBinding('class') nosorting = 'table-sorting';
@HostBinding('class') ascending = 'table-sorting_asc';
@HostBinding('class') descending = 'table-sorting_desc';
@HostListener('click', ['$event'])
onClick(event) {
if (event.target.nodeName === 'TH') {
console.log(this.el);
const target = $(event.target);
if (target.data('sort')) {
if (target.hasClass('table-sorting')) {
this.renderer.addClass(this.el.nativeElement, 'table-sorting_asc');
this.renderer.removeClass(this.el.nativeElement, 'table-sorting');
}
if (target.hasClass('table-sorting_asc')) {
this.renderer.addClass(this.el.nativeElement, 'table-sorting_desc');
this.renderer.removeClass(this.el.nativeElement, 'table-sorting_asc');
}
if (target.hasClass('table-sorting_desc')) {
this.renderer.addClass(this.el.nativeElement, 'table-sorting');
this.renderer.removeClass(this.el.nativeElement, 'table-sorting_desc');
}
}
}
}
有人可以详细告诉我他们的工作方式和使用方法吗?
答案 0 :(得分:1)
@HostBinding('class.classsName') varName:boolean;
你要做的就是将布尔值设置为true或false,然后该类将在dom中处于活动状态。