web-dev-qa-db-fra.com

Est-il possible d'ajouter une classe dynamique à l'hôte dans Angular 2?

Je sais que dans Angular2, je peux ajouter une classe 'rouge' à l'élément de sélection d'un composant en procédant comme suit:

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

Je me demande s’il existe un moyen d’ajouter une classe dynamic à un hôte, semblable à ce que vous feriez avec NgClass (je sais que NgClass n’est pas pris en charge, je cherche des solutions possibles):

@Component({
    selector: 'selector-el',
    Host: {
        '[NgClass]': 'colorClass'
    },
    ...
})
...
constructor(){
    this.colorClass = 'red';
}
angularangular2-template
13
Alec Sibilia

Vous pouvez utiliser quelque chose comme ça:

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

Renderers setElementClass peut être utilisé pour ajouter ou supprimer une classe arbitraire. Par exemple md-[color] où color est fourni par une entrée

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

Voir aussi recherche de nativeElement.classList.add () alternative

18
Günter Zöchbauer

Si vous aimez le changer de l'extérieur, vous pouvez combiner @HostBinding et @Input():

@Component({
    selector: 'my-component',
    template: ``
})
export class MyComponent {
    @HostBinding('class.your-class') @Input() isSelected: boolean;
}
9
crashbus
import {Component, HostBinding} from 'angular2/core';

@Component({
  (...)
}

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

J'ai récemment créé une directive appelée <ng-Host> (inspirée par this issue ), elle redirigera chaque modification (non structurelle) vers l'élément hôte de composant, utilisation:

@Component({
  template: `
    <ng-Host [ngClass]="{foo: true, bar: false}"></ng-Host>
    <p>Hello World!</p>
  `
})
class AppComponent { }

La démo en ligne peut être trouvée ici .

Utilisations prises en charge définies ici .

J’ai atteint cet objectif avec le modèle Directive as a Service, à savoir fournir manuellement NgClass et l’utiliser comme ( démonstration en ligne )

En raison du mécanisme DI, NgClass obtiendra la ElementRef de l'élément hôte actuel, le modificateur Self() permet de le garantir. Donc, pas besoin de créer une instance par constructeur, donc toujours sous l'utilisation de l'API publique.

Il pourrait être plus concis lorsqu'il est combiné avec l'héritage de classe, un exemple peut être trouvé à ici .

5
Trotyl

Vous pouvez faire ce qui suit:

import {Component} from "@angular/core"

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

Ce qui est beaucoup plus simple que d'introduire une variable.
Devrait fonctionner dans Angular2 rc5, rc6, rc7, final. Peut fonctionner dans les versions précédentes, mais ne l’a pas essayé.

0
Yaroslav Yakovlev