Answers:
@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 `<body>`
//this.cdRef.detectChanges();
}
}这样，您无需在组件外部添加CSS。像CSS
:host(.someClass) {
background-color: red;
}从组件内部工作，并且仅当someClass在host元素上设置了类时才应用选择器。
:host工作的零件。我在哪里可以了解有关@Component（）装饰器中的主机参数的更多信息（语法对我来说并不明显，并且@Component文档没有太多解释）或了解有关您首选的HostBinding的信息（仅作为Interface列在Angular2网站？）
@Input() @Output() @HostBinding() @HostListener() @ViewChild(ren)() @ContentChild(ren)()
@HostBinding('class.xxx') get xxxclass(){ return !this.someField;}
Günter的回答很好（问题是要求动态类属性），但我想我只是为了完整性而添加...
如果您正在寻找一种快速干净的方法来将一个或多个静态类添加到组件的宿主元素（即，出于主题样式的目的），则可以执行以下操作：
@Component({
selector: 'my-component',
template: 'app-element',
host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}而且，如果您在entry标签上使用了一个类，Angular将合并这些类，即
<my-component class="someClass2">
I have both someClass1 & someClass2 applied to me
</my-component>ngcontent_host模板中元素的任何属性，它们不会影响host元素，因为它们不会影响，只能影响模板元素；他们只会影响。我错了吗 有什么建议吗？我想我永远都可以转, let's call those , so if I put a style in the ngcontent_hostngcontent_templateViewEncapsulation.None
@HostBinding('class.someClass') true;。您甚至可以从组件扩展的任何类中执行此操作。
{}变体，则可能要将设置use-host-property-decorator设置为falsein tslint.json。否则，您将收到IDE警告。@adamdport该方法不起作用（不再）。在我们的应用程序中使用Angular 5.2.2。
您只需@HostBinding('class') class = 'someClass';在@Component类中添加即可。
例：
@Component({
selector: 'body',
template: 'app-element'
})
export class App implements OnInit {
@HostBinding('class') class = 'someClass';
constructor() {}
ngOnInit() {}
}如果要将动态类添加到宿主元素，则可以将其HostBinding与getter 结合使用，如下所示：
@HostBinding('class') get class() {
return aComponentVariable
}
Stackblitz演示位于https://stackblitz.com/edit/angular-dynamic-hostbinding
这是我的操作方式（角度7）：
在组件中，添加输入：
@Input() componentClass: string = '';
然后在组件的HTML模板中添加以下内容：
<div [ngClass]="componentClass">...</div>
最后在实例化组件的HTML模板中：
<root componentClass="someclass someotherclass">...</root>
免责声明：我是Angular的新手，所以我可能在这里很幸运！
<root>标记的元素，而不是您添加到元素模板中的任何内容。
someField = truein-ngOnInit()method而不是ngAfterViewInit()。我无法使其正常工作。