下面是我的做法(Angular 7):

在组件中，添加一个输入:

@Input() componentClass: string = '';

然后在组件的HTML模板中添加如下内容:

<div [ngClass]="componentClass">...</div>

最后在你实例化组件的HTML模板中:

<root componentClass="someclass someotherclass">...</root>

免责声明:我是Angular的新手，所以我可能只是运气好而已!

另一个问题是CSS必须在组件作用域之外定义，这破坏了组件封装

这是不对的。使用scss (SASS)，您可以轻松地样式组件(本身;主机)如下:

:host {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    visibility: hidden;

    &.someClass {
        visibility: visible;
    }
}

这样封装是“完整的”。

如果你想给你的host元素添加一个动态类，你可以把你的HostBinding和getter结合起来

@HostBinding('class') get class() {
    return aComponentVariable
}

Stackblitz演示在https://stackblitz.com/edit/angular-dynamic-hostbinding

你可以简单地添加@HostBinding('class') class = 'someClass';在@Component类中。

例子:

@Component({
   selector: 'body',
   template: 'app-element'       
})
export class App implements OnInit {

  @HostBinding('class') class = 'someClass';

  constructor() {}      

  ngOnInit() {}
}

下面是我的做法(Angular 7):

在组件中，添加一个输入:

@Input() componentClass: string = '';

然后在组件的HTML模板中添加如下内容:

<div [ngClass]="componentClass">...</div>

最后在你实例化组件的HTML模板中:

<root componentClass="someclass someotherclass">...</root>

免责声明:我是Angular的新手，所以我可能只是运气好而已!

除了@ joshudavid的答案，还有另一种方法来定义静态类，我尝试过在angular v8上也可以(可能也适用于旧版本):

@Component({
selector: "my-component.someClass1.someClass2",
...
})

它将生成以下输出:

<my-component class="someClass1 someClass2">
 ...
</my-component>

你也可以这样用:

@Component({
selector: ".someClass1.someClass2",
...
})

它将生成以下输出:

<div class="someClass1 someClass2">
 ...
</div>