web-dev-qa-db-fra.com

Comment ajouter "classe" à l'élément hôte?

Je ne sais pas comment ajouter à mon composant <component></component> un attribut classe dynamique mais à l'intérieur du modèle html (composant.html).

La seule solution que j'ai trouvée consiste à modifier l'élément via l'élément natif "ElementRef". Cette solution semble un peu compliquée de faire quelque chose qui devrait être très simple.

Un autre problème est que CSS doit être défini en dehors de la portée du composant, rompant ainsi son encapsulation.

Y a-t-il une solution plus simple? Quelque chose comme <root [class]="..."> .... </ root> à l'intérieur du modèle.

angularangular2-template
146
lascarayf
@Component({
   selector: 'body',
   template: 'app-element',
   // prefer decorators (see below)
   // Host:     {'[class.someClass]':'someField'}
})
export class App implements OnInit {
  constructor(private cdRef:ChangeDetectorRef) {}

  someField: boolean = false;
  // alternatively also the Host parameter in the @Component()` decorator can be used
  @HostBinding('class.someClass') someField: boolean = false;

  ngOnInit() {
    this.someField = true; // set class `someClass` on `<body>`
    //this.cdRef.detectChanges(); 
  }
}

Exemple de Plunker

De cette façon, vous n'avez pas besoin d'ajouter le CSS en dehors du composant. CSS comme

:Host(.someClass) {
  background-color: red;
}

fonctionne de l'intérieur du composant et le sélecteur n'est appliqué que si la classe someClass est définie sur l'élément Host.

248
Günter Zöchbauer

La réponse de Günter est excellente (la question demande dynamique attribut de classe), mais je pensais ajouter, par souci d'exhaustivité ...

Si vous recherchez un moyen simple et rapide d’ajouter une ou plusieurs classes statique à l’élément hôte de votre composant (c’est-à-dire à des fins de style de thème), vous pouvez simplement:

@Component({
   selector: 'my-component',
   template: 'app-element',
   Host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}

Et si vous utilisez une classe sur la balise d’entrée, Angular fusionnera les classes, c.-à-d.,

<my-component class="someClass2">
  I have both someClass1 & someClass2 applied to me
</my-component>
144
JoshuaDavid

Voici comment je l'ai fait (Angular 7):

Dans le composant, ajoutez une entrée:

@Input() componentClass: string = '';

Ensuite, dans le modèle HTML du composant, ajoutez quelque chose comme:

<div [ngClass]="componentClass">...</div>

Et enfin dans le modèle HTML où vous indiquez le composant:

<root componentClass="someclass someotherclass">...</root>

Disclaimer: je suis assez nouveau dans Angular, alors je risque d'avoir de la chance ici!

1
zippycoder