Ajouter dynamiquement des classes aux éléments Host à l’aide de @HostBinding in Angular?

Question

Question:

Est-il possible d'utiliser @HostBinding de manière à ajouter, supprimer ou basculer des classes sur un élément Host et à ne pas supprimer des classes préexistantes, en particulier lorsque les classes doivent être basculées de manière dynamique?

Par exemple, ceci ajoutera light class et ne perturbera pas les classes précédentes, cependant, light ne pourra pas être dynamique.

Imaginez ce noeud dom rendu:

<div [classToggler] class="someClasses1 someClasses2' ></div>

Avec ce contrôleur:

@HostBinding('class.light') isLight = theme === 'light';  // true
ngOnInit() {
  this.store.select('classToggler').subscribe((className) => {
      this.theme = className || 'light'
  });

}

Where, comme exemple de contrôleur, ajoutera la classe light de manière dynamique, mais à ma connaissance, supprimera les autres classes de l'élément Host.

@HostBinding('class') theme;

ngOnInit() {
  this.store.select('classToggler').subscribe((className) => {
      this.theme = className || 'light'
  });
}

En fin de compte, le deuxième exemple re-rendra l'élément dom de la manière suivante:

<div [classToggler] class="light'></div>

Et par conséquent, supprimez les classes précédentes, ce qui n'est pas souhaité. Des idées sur la façon de tirer le meilleur parti des deux mondes?

Answer 1

Changer cette ligne 

@HostBinding('class') theme;

à 

@HostBinding('class') 
get themeClass(){
  return this.theme;
};