angular - 在 Angular 中使用 @HostBinding 动态地将类添加到宿主元素？

Question

问题:

是否可以使用 @HostBinding 来添加、删除或切换宿主元素上的类，而不是删除预先存在的类，特别是当类需要动态切换？

例如，这将添加 light 类并且不会中断之前的类；但是，light 不能是动态的。

想象一下这个渲染的 dom 节点:

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

有了这个 Controller :

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

}

在此示例 Controller 中，将动态添加灯光类，但据我所知，将删除宿主元素上的其他类。

@HostBinding('class') theme;

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

最后，第二个示例将重新渲染 dom 元素，如下所示:

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

因此，删除以前不需要的类。关于如何两全其美的任何想法？

Answer 1

改变这一行

@HostBinding('class') theme;

到

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