2

Plunkr 链接到我正在尝试做的事情-> https://plnkr.co/edit/mC8jGYROlpqFpnjTCQKr?p=preview

我的目标是能够从工具菜单向左拖到舞台上。在“放置”时，所选项目应嵌套在舞台内。

我搜索了文档和博客。我已经看到“CreateEmbeddedView”似乎是我应该使用的。

根据 Angular2 文档，以下是我正在寻找的内容：

createEmbeddedView(templateRef: TemplateRef, context?: C, index?: number) : EmbeddedViewRef

但是似乎找不到一个实际的例子。我使用的是“src/designer-droppable.directive.ts”中的以下内容：

addWidget(textWidget: { new(): TextWidget }): ComponentRef<TextWidget>{
    let dialogComponentFactory = 
      this.componentFactoryResolver.resolveComponentFactory(textWidget);

    let dialogComponentRef = this.viewContainer.createComponent(dialogComponentFactory, this.viewContainer.length);
    //let tw = TemplateRef<{new(): TextWidget}>;
    //let dialogComponentRef = this.viewContainer.createEmbeddedView(TemplateRef<new() => TextWidget>);

    return dialogComponentRef;
}

但是，这会将一个组件作为同级添加到“viewContainerRef”而不是嵌入它。即在 plnkr 中，如果您将某些东西拖到舞台上，它将被添加到舞台的右侧，而不是被嵌入。

我尝试使用 CreateEmbeddedView，但我不清楚如何动态定义 TemplateRef。

我已经看到很多关于动态组件加载器的过时文档，这些文档已经被工厂弃用了。我所缺少的任何帮助都会很棒。任何活生生的例子都会很棒。

谢谢你。

4

0 回答 0