我不知道如何在我的组件<component></component>中添加dynamic class属性，但是在模板html(component.html)中.
我找到的唯一解决方案是通过"ElementRef"原生元素修改该项.这个解决方案似乎有点复杂，需要做一些非常简单的事情.
另一个问题是CSS必须在组件范围之外定义，从而 destruct 组件封装.
有更简单的解决方案吗？模板中大约有<root [class]="..."> .... </ root>个.
我不知道如何在我的组件<component></component>中添加dynamic class属性，但是在模板html(component.html)中.
我找到的唯一解决方案是通过"ElementRef"原生元素修改该项.这个解决方案似乎有点复杂，需要做一些非常简单的事情.
另一个问题是CSS必须在组件范围之外定义，从而 destruct 组件封装.
有更简单的解决方案吗？模板中大约有<root [class]="..."> .... </ root>个.
这样，您就不需要在组件之外添加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 `<body>`
//this.cdRef.detectChanges();
}
}
此CSS定义在组件内部，只有在宿主元素上设置了类someClass(从外部)时才应用 Select 器:
:host(.someClass) {
background-color: red;
}