Wie Klasse hinzufügen/entfernen von Direktive

Question

Ich habe eine benutzerdefinierte Direktive, die in der Lage sein sollte, Klasse abhängig von anderen Bedingungen hinzufügen/entfernen.

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

Wenn Sie nicht wollen, die ngClass Richtlinie verwenden (Hinweis: Sie eine Funktion [ngClass]="myClasses()" passieren kann, wenn es zu chaotisch inline in Ihrer Vorlage sein würde) können Sie die Renderer2 nur nutzen können, für sie einen hinzufügen oder mehr Klassen:

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

}