如何從指令中添加/刪除類

Question

我有一個自定義指令，它應該能夠根據其他條件添加/刪除類。

I.e.

// imports 

@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); 
    } 

} 

Answer 2

export class CustomDirective { 
    classname:string = "magenta"; 

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

    addClass(className: string, element: any) { 
     // make sure you declare classname in your main style.css 
     this.renderer.addClass(this.elementRef.nativeElement, className); 
    } 

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

}