如何使用 Angular 4 中的自定义指令添加或删除 css 类？

Question

我正在使用自定义指令，我想在单击时修改宿主元素的类。每个人都建议使用 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');
        }
      }
    }
  }

谁能详细告诉我它们的工作原理和使用方法？

Answer 1

@HostBinding('class.classsName') varName:boolean;

您要做的就是设置布尔值 true 或 false，然后该类将在 dom 中处于活动状态。