如何将“类”添加到宿主元素？

小编典典

如何将“类”添加到宿主元素？

all

我不知道如何在模板 html (component.html)中添加<component></component>动态 类属性到我的组件中。

我找到的唯一解决方案是通过“ElementRef”本机元素修改项目。这个解决方案似乎有点复杂，做一些应该很简单的事情。

另一个问题是 CSS 必须在组件范围之外定义，破坏了组件封装。

有没有更简单的解决方案？<root [class]="..."> .... </ root>类似于模板内部的东西。

阅读 85

2022-05-25

共1个答案

小编典典

这样您就不需要在组件之外添加 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(); 
  }
}

Plunker 示例

这个 CSS 是在组件内部定义的，只有当类someClass被设置在宿主元素上时（从外部）才应用选择器：

:host(.someClass) {
  background-color: red;
}

2022-05-25