ディレクティブからクラスを追加/削除する方法

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()"に関数を渡すことができます）を使用したくない場合は、1を追加するためにあなただけの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); 
    } 

}