如何在主机元素中添加"class"？

我不知道如何向我的组件添加动态类属性,但在模板html(component.html)中.

我找到的唯一解决方案是通过"ElementRef"原生元素修改项目.做一些非常简单的事情似乎有点复杂.

另一个问题是必须在组件范围之外定义CSS,从而破坏组件封装.

有更简单的解决方案吗？像 .... 模板里面的东西.

@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 ``
    //this.cdRef.detectChanges(); 
  }
}

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

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

  I have both someClass1 & someClass2 applied to me