css - 如何将样式类添加到 Angular 5 中创建的 ComponentRef？

Question

我尝试在使用 ViewContainerRef 和 ComponentFactoryResolver 创建组件后立即将 CSS 类添加到该组件。我希望能够根据已添加到 myViewContainerRef 的其他组件来设置类。

export class ContainerComponent {

@ViewChild('myContainerRef') myContainerRef: ViewContainerRef

constructor(private factoryResolver: ComponentFactoryResolver,
            private renderer: Renderer2) {}

addComponent() {
  const componentFactory = this.factoryResolver.resolveComponentFactory(SomeBaseComponent)
  const newComponent = this.myContainerRef.createComponent(componentFactory)

  // SomeBaseComponent has been added successfully to myContainerRef
  // Want to add CSS class to the newComponent
  // None of the following statements are adding any styles
  if( someLogic()) {
    this.renderer.addClass(newComponent.location.nativeElement, 'my-css-class')
    this.renderer.addClass(newComponent.el.nativeElement, 'my-css-class')
    this.renderer.setStyle(newComponent.el.nativeElement, 'background', 'yellow')
  }
  }
}

export class SomeBaseComponent {

  constructor(public el: ElementRef) {}

}

有没有更好的方法来尝试以编程方式添加样式？是否有其他东西我可以注入(inject)到 SomeBaseComponent 中以便能够在此时添加我想要的样式，或者我应该在 newComponent.instance 上设置标志并拥有基础组件可以控制自己设置什么样式？

Answer 1

您应该添加另一个 @ViewChild，它将具有 ElementRef 类型的read。

@ViewChild("myContainerRef", {read: ElementRef}) elementRef: ElementRef;

要设置 class 属性，您应该使用以下内容。

this.elementRef.nativeElement.setAttribute("class", "test")

注意:我建议将创建逻辑放在 ngOnInit() 方法中，在自定义 addComponent() 中。