angular - 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 を動的に定義する方法がわかりません。

私は Dynamic Component Loader に関する多くの古いドキュメントを見てきましたが、それはその後ファクトリを支持して廃止されました。私が欠けているものへの支援は素晴らしいでしょう。ライブの例は素晴らしいでしょう。

ありがとうございました。