nativeElement.classList.ajouter() alternative

Je suis en train de créer un bouton de la composante angulaire 2.
À l'accueil, je dois mettre un générées dynamiquement css classname. (selon lié à la propriété)

'[ngClass] " sur l'hôte ne fonctionne pas.

J'ai lu que l'utilisation de elementRef.nativeElement.classList.ajouter(valeur) n'est pas la meilleure façon, car classList n'est pas pris en charge sur les web workers (ou presque)

Quelles sont mes meilleures options pour générer la classe dynamiquement sur l'hôte?

@Component({
    selector: '[md-button]',
})
export class MdButton {
    color_: string;

    @Input
    set color() {
        this.color_ = value;
        if (this.elementRef !== undefined) {
            this.elementRef.nativeElement.classList.add('md-' + this.color_);
        }   
    }

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

    constructor(public elementRef: ElementRef){}
}
this.elementRef.nativeElement.className += ' md-' + this.color_ ?

OriginalL'auteur BakGat | 2016-02-19

  1. 10
    @Component({
    selector: '[md-button]' //,
    //host: { '[class]': 'classList()' }
})
export class MdButton {
    color_: string;

    //classList() {
    // return 'md-' + this.color_;
    //}

    @Input
    set color() {
        this.color_ = value;
        //if (this.elementRef !== undefined) {
        //   this.elementRef.nativeElement.classList.add('md-' + this.color_);
        //}   

        this.renderer.setElementClass(this.elementRef, 'md-' + this.color_, true);
    }

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

    constructor(public elementRef: ElementRef, private renderer: Renderer2){}
}
    Merci @günter-zöchbauer, mais qui laisse un problème. Lorsque vous essayez de définir <button md-button class="myCustomClass" color="accent">submit</button>la classe 'myCustomClass" est remplacé par "md-accent'. Les deux doivent exister.
    J'ai mis à jour ma réponse. Je ne suis pas entièrement sûr si le elementRef ou elementRef.nativeElement doit être passé. Dans une récente mise à jour, il a été changé pour certaines/toutes les Api et je n'ai pas vérifié depuis si Renderer est inclus, mais je pense que oui.
    Est-ce encore la meilleure façon de le faire? Convertisseur est obsolète. Et quelqu'un peut-il confirmer ce que l'OP a dit à propos de les web workers? Pourquoi l'ajout ou la suppression de classlist une mauvaise façon?
    La dépréciation des nœuds dans angulaire.io/api/core/moteur de Rendu dit "Utiliser le Renderer2 à la place". ce qui est essentiellement le même.
    Vous pouvez également utiliser elementRef.nativeElement... et commune code JS pour modifier la classe d'un élément, si vous ne se soucient pas de rendu côté serveur ou web-travailleur de soutien.

    OriginalL'auteur Günter Zöchbauer

  2. 6

    Grâce à Günter j'ai trouvé la solution.
    C'est son code, mais nettoyé pour toute personne qui peut l'utiliser à l'avenir.

    private color_: string;

@Input()
set color(value: string) {
    this.color_ = value;

    this.renderer.setElementClass(this.elementRef, 'md-' + this.color_, true);
}

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

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

    OriginalL'auteur BakGat