angular - 如何从指令中添加/删除类

Question

使用自定义指令，您将如何根据特定条件在宿主元素上添加/删除类？

示例:

@Directive({
  selector: '[customDirective]'
})
export class CustomDirective {
  constructor(service: SomService) {
    // code to add class

    if (service.someCondition()) {
        // code to remove class
    }
  }
}

Answer 1

如果你不想使用 ngClass 指令(提示:你可以传递一个函数给 [ngClass]="myClasses()" 如果它是在你的模板中进行困惑的内联)你可以使用 Renderer2 为它添加一个或多个类:

export class CustomDirective {

   constructor(private renderer: Renderer2,
               private elementRef: ElementRef,
               service: SomService) {
   }

   addClass(className: string, element: any) {
       this.renderer.addClass(element, className);
       // or use the host element directly
       // this.renderer.addClass(this.elementRef.nativeElement, className);
   }

   removeClass(className: string, element: any) {
       this.renderer.removeClass(element, className);
   }

}