Ist es möglich, in Angular 2 eine dynamische Klasse zum Host hinzuzufügen?

Question

Ich weiß, dass in Angular2 ich eine Klasse hinzufügen ‚rot‘ zu einem Auswahlelement der Komponente, indem Sie diese:

@Component({ 
    selector: 'selector-el', 
    host: { 
     '[class.red]': 'true' 
    }, 
    ... 
}) 

Ich frage mich, ob eine Art und Weise gibt es eine dynamische Klasse zu einem Host hinzuzufügen, (NgClass nicht wirklich unterstützt, ich bin auf der Suche nach möglichen Lösungen ich weiß) ähnlich, was Sie mit NgClass tun würde:

@Component({ 
    selector: 'selector-el', 
    host: { 
     '[NgClass]': 'colorClass' 
    }, 
    ... 
}) 
... 
constructor(){ 
    this.colorClass = 'red'; 
} 

Answer 1

Sie so etwas verwenden:

@Directive({ 
    (...) 
    host: { 
    '[class.className]' : 'className', 
    '[class]' : 'classNames' 
    } 
} 
export class MyDirective { 
    constructor() { 
    this.className = true; 
    this.classNames = 'class1 class2 class3'; 
    } 
} 

Answer 2

import {Component, HostBinding} from 'angular2/core'; 

@Component({ 
    (...) 
} 

export class MyComponent { 
    @HostBinding('class') colorClass = 'red'; 
} 

Answer 3

Die Renderer s setElementClass kann verwendet werden, um eine beliebige Klasse hinzuzufügen oder zu entfernen. Zum Beispiel md-[color] wo color wird durch einen Eingangs

<some-cmp [color]="red"> 

@Component({ 
// @Directive({ 
    selector: 'some-cmp', 
    template: '...' 
}) 
export class SomeComp { 
    color_: string; 

    @Input 
    set color() { 
     this.renderer.setElementClass(this.elementRef.nativeElement, 'md-' + this.color_, true); 
    } 

    get color(): string { 
     return this.color_; 
    } 

    constructor(public elementRef: ElementRef, private renderer: Renderer){} 
} 

See zur Verfügung gestellt auch looking for nativeElement.classList.add() alternative

Answer 4

Sie können Folgendes tun:

import {Component} from "@angular/core" 

@Component({ 
    selector: "[textbox]", 
    host: {"class": "first-class secondClass ThirdClass AnYClaSs"}, 
    template: ...            
}) 
export class MyComponent { } 

Welche imo ist viel einfacher als die Einführung eine Variable.
Sollte in Angular2 arbeiten rc5, rc6, rc7, final. Kann in früheren Versionen arbeiten, hat es aber nicht versucht.

Answer 5

Wenn Sie es von außen können sich ändern möchten kombinieren @HostBinding und @Input():

@Component({ 
    selector: 'my-component', 
    template: `` 
}) 
export class MyComponent { 
    @HostBinding('class.your-class') @Input() isSelected: boolean; 
} 

Answer 6

ich dies durch die Richtlinie erreicht haben, als Service Muster, nämlich manuell NgClass Bereitstellung und es verwenden, wie (online demo):

const prefix = 'ant-btn' 

@Directive({ 
    selector: 'button[antBtn]', 
    providers: [ NgClass ], 
}) 
export class HelloComponent implements OnChanges { 
    @Input() color: string = 'default' 

    private hostClasses: { [name: string]: boolean } 

    constructor(@Self() private ngClass: NgClass) { } 

    ngOnChanges(changes: SimpleChanges): void { 
    this.hostClasses = { 
     [`${prefix}`]: true, 
     [`${prefix}-${this.color}`]: true, 
    } 

    this.updateHostClasses() 
    } 

    private updateHostClasses(): void { 
    this.ngClass.ngClass = this.hostClasses 
    this.ngClass.ngDoCheck() 
    } 
} 

Aufgrund der DI-Mechanismus wird NgClass erhalten die ElementRef des aktuellen Host-Elements unterstützt der Modifikator Self() dies. Es ist also nicht notwendig, eine Instanz per Konstruktor zu erstellen, also immer noch unter öffentlicher API-Nutzung.

Es könnte prägnanter sein, wenn es mit Klassenvererbung kombiniert wird, ein Beispiel kann bei here gefunden werden.