如何在Angular 2中动态嵌套/嵌入组件模板

Question

Plunkr指向我尝试做的事情 - ＆gt; https://plnkr.co/edit/mC8jGYROlpqFpnjTCQKr?p=preview

我的目标是能够将工具菜单中的某些内容拖到舞台上。在＆＃34; drop＆＃34;所选项目应嵌套在舞台中。

我在博客上搜索了文档。我已经看到了＆＃34; CreateEmbeddedView＆＃34;看起来像是我应该使用的。

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

  

createEmbeddedView（templateRef：TemplateRef，context？：C，index？：number）：EmbeddedViewRef

然而，似乎无法找到一个实际的例子。我使用的是＆＃34; src / designer-droppable.directive.ts＆＃34;：

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;
}

然而，这会将一个组件作为兄弟添加到＆＃34; viewContainerRef＆＃34;而不是嵌入它。即在plnkr中，如果你将某些东西拖到舞台上，它会被添加到舞台的右边而不是嵌入。

我尝试过使用CreateEmbeddedView，但我不知道如何动态定义TemplateRef。

我已经看到很多关于动态组件加载器的过时文档，这些文档已被弃用以支持工厂。我失踪的任何帮助都会很棒。任何现实的例子都会很棒。

谢谢。