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 .

我已经看到很多关于动态组件加载器的过时文档,因此已被弃用以支持工厂 . 对我所缺少的任何帮助都会很棒 . 任何现场的例子都会很精彩 .

谢谢 .