使用Angular中的@HostBinding动态地向主元素添加类？

Question

题:

是否可以以@HostBinding这种方式在主机元素上添加,删除或切换类而不删除预先存在的类,特别是在需要动态切换类时？

例如,这将添加light类并且对前面的类light没有破坏性;但是,不能是动态的.

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

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

有了这个控制器:

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

}

作为这个示例控制器,将动态添加light类,但据我所知,将删除host元素上的其他类.

@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;
};

Answer 2

你需要的是 [ngClass] 像这样：

<div [ngClass]="{'light':condition}" class="someClasses1 someClasses2" ></div>

当条件为真时，“light”类将被添加到 someClasses1 someClasses2 中，反之亦然

您甚至可以在多种情况下组合多个类，如下所示：

<div [ngClass]="{'class1':condition1, 'class2':conditions2}" class="someClasses1 someClasses2" ></div>

您可以根据需要添加任意数量的条件类。