Как вы динамически вкладываете / внедряете шаблоны компонентов в Angular 2

Question

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.

Я видел много устаревшей документации по загрузчику динамических компонентов, которая с тех пор устарела в пользу заводов. Любая помощь в том, что мне не хватает, была бы великолепна. любые живые примеры были бы замечательны.

благодарю вас.