7

问题：

是否可以以@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'
  });

}

作为这个示例控制器，将动态添加灯光类，但据我所知，它将删除主机元素上的其他类。

@HostBinding('class') theme;

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

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

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

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

4

2 回答 2

5

更改此行

@HostBinding('class') theme;

至

@HostBinding('class') 
get themeClass(){
  return this.theme;
};
于 2018-10-08T15:16:52.943 回答
-3

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

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

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

您甚至可以编写具有多种情况的多个类，如下所示：

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

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

于 2017-11-29T04:34:26.083 回答