Question

我已经创建了动态组件，但是没有得到渲染。但问题是我能够在开发人员工具中显示标记。

这是我的代码。

       var rect = this.svg.selectAll(".button");

      var newRects = rect.enter().append("g")
      .attr("transform", function (d) {
        return "translate(" + (d.x + 460) + "," + d.y + ")";
      })
        newRects.append("g")
        .each((d: Data, i) => {
            const factory = this.resolver.resolveComponentFactory(componenttoload);
            var component = factory.create(this.viewContainerRef.parentInjector);
            component.instance.data = d;
            component.instance.width = this.rectGrid.nodeSize()[0];
            component.instance.height = this.rectGrid.nodeSize()[1];
            this.appRef.attachView(component.hostView);
            component.changeDetectorRef.detectChanges();
            const componentRoot: HTMLElement = (component.hostView as EmbeddedViewRef<any>).rootNodes[0];
            const node = newRects[0][i]; 
            this.render.appendChild(node, componentRoot);
        })

Answer 1

不确定您的问题，也许添加通用类并尝试一下。

export interface Custom {data:any}  

<Custom>componentRef.instance).data= 'data';

希望这对您有所帮助。

Answer 2

您可以在此StackBlitz Link

中找到完整的工作示例

您需要document.body.appendChild()

appendDialogComponentToBody() {
   const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
   const componentRef = componentFactory.create(this.injector);
   this.appRef.attachView(componentRef.hostView);
   const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
   document.body.appendChild(domElem);

   this.dialogComponentRef = componentRef;
}

动态组件未呈现

2 个答案: