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

  • H5W3
  • 2022-12-09 10:18:06
  • 分类：综合

我不知道如何在模板 html (component.html)中添加<component></component>动态

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

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

有没有更简单的解决方案？<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被设置在宿主元素上时（从外部）才应用选择器：

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

以上是 如何将“类”添加到宿主元素？ 的全部内容， 来源链接： www.h5w3.com/z/755937.html

回到顶部