angular - 如何将一个组件添加到elementref中？

Question

我想将一个组件作为子元素添加到elementref中，并可以访问它的属性。

const element: HTMLElement = document.createElement('div');

element.innerHTML = // Component needs to be added here

// Need to have access to properties of the Component here

我已将完整日历添加到我的项目中，并且对于时间表，我需要添加自定义资源元素。为此，我只能访问HTMLElement和一些数据。所以我要做的是将初始化组件传递给HTMLElement。

现在，我唯一的选择是将html作为字符串编写并将其传递给innerHTML。有更好的选择吗？

Answer 1

在我的一个项目中，我通过这种方式实现了与您的要求类似的功能。让我知道是否有帮助？

constructor(private componentFactoryResolver: ComponentFactoryResolver,
            private injector: Injector, 
            private appRef: ApplicationRef) {

  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent); // Your dynamic component will replace DynamicComponent

  const componentRef = componentFactory.create(this.injector);

  this.appRef.attachView(componentRef.hostView);  

  const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

  const element: HTMLElement = document.createElement('div');
  element.appendChild(domElem); // Component needs to be added here
  document.body.appendChild(element);
}

这样，您将以 componentRef引用动态组件