如何添加“类”主机元素？
我不知道如何添加到我的组件<component></component>dynamic类属性，但在模板html（component.html）内。
我find的唯一解决scheme是通过“ElementRef”本地元素修改项目。 这个解决scheme似乎有点复杂，要做一些非常简单的事情。
另一个问题是，CSS必须在组件范围之外定义，打破组件封装。
有一个更简单的解决scheme？ 像模板中的<root [class]="..."> .... </ root> 。
@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(); } }
Plunker例子
这样你就不需要在组件外面添加CSS。 像CSS
:host(.someClass) { background-color: red; }
从组件内部工作，select器只适用于在主机元素上设置了类someClass情况。
Günter的答案是伟大的（问题是要求dynamic类属性），但我想我会添加只是为了完整性…
如果您正在寻找一种快速而干净的方法来将一个或多个静态类添加到组件的主机元素（即，为了主题样式），您可以执行以下操作：
@Component({ selector: 'my-component', template: 'app-element', host: {'class': 'someClass1'} }) export class App implements OnInit { ... }
如果你在入口标签上使用一个类，Angular会合并这些类，也就是说，
<my-component class="someClass2"> I have both someClass1 & someClass2 applied to me </my-component>
