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';
}
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';
}
}
Renderer
s 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
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;
}
import {Component, HostBinding} from 'angular2/core';
@Component({
(...)
}
export class MyComponent {
@HostBinding('class') colorClass = 'red';
}
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 .
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é.