当你有多个主机绑定类时，我发现下面使用HostBinding getter是最方便的:

@Component({ ... })
export class MyComponent {
    @Input()
    theme: 'success' | 'error';

    @HostBinding('class')
    get classes(): Record<string, boolean> {
        'my-component': true,
        'my-component-success-theme': this.theme == 'success',
        'my-component-error-theme': this.theme == 'error' 
    }
}

即使对于没有相应逻辑的普通类绑定，这也是在一个地方管理所有宿主类的好方法。

@Component({ ... })
export class MyComponent {
    @HostBinding('class')
    get classes(): Record<string, boolean> {
        'my-component': true,
        'my-component-modifier': true
    }
}

此外，与@Component装饰器的host属性不同，这种方法还允许您为类字符串使用枚举。

export enum MyComponentClass {
    BaseClass = 'my-component',
    ModifierClass = 'my-component-modifier'
}

@Component({ ... })
export class MyComponent {
    @HostBinding('class')
    get classes(): Record<string, boolean> {
        [MyComponentClass.BaseClass]: true,
        [MyComponentClass.ModifierClass]: true
    }
}

对于多职业的情况，就像上面提到的@jbojcic，你可以使用:

主机:{类:'A B C'}

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

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

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

这就是我所做的:

import { Component, Attribute, HostBinding } from "@angular/core";

@Component({
    selector: "selector-el",
    template: ...                                            
})
export class MyComponent {
    @HostBinding('class') get classAttribute(): string {
        let defaultClasses = 'selector-el-class';
        return defaultClasses + ' ' + this.classNames;
    }

    constructor(
        @Attribute('class') public classNames: string
    ) { }
}

当你有多个主机绑定类时，我发现下面使用HostBinding getter是最方便的:

@Component({ ... })
export class MyComponent {
    @Input()
    theme: 'success' | 'error';

    @HostBinding('class')
    get classes(): Record<string, boolean> {
        'my-component': true,
        'my-component-success-theme': this.theme == 'success',
        'my-component-error-theme': this.theme == 'error' 
    }
}

即使对于没有相应逻辑的普通类绑定，这也是在一个地方管理所有宿主类的好方法。

@Component({ ... })
export class MyComponent {
    @HostBinding('class')
    get classes(): Record<string, boolean> {
        'my-component': true,
        'my-component-modifier': true
    }
}

此外，与@Component装饰器的host属性不同，这种方法还允许您为类字符串使用枚举。

export enum MyComponentClass {
    BaseClass = 'my-component',
    ModifierClass = 'my-component-modifier'
}

@Component({ ... })
export class MyComponent {
    @HostBinding('class')
    get classes(): Record<string, boolean> {
        [MyComponentClass.BaseClass]: true,
        [MyComponentClass.ModifierClass]: true
    }
}

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

例子:

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

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

  constructor() {}      

  ngOnInit() {}
}