dynamic - angular 2のタブにコンポーネントを動的に追加します

Question

目標は、リストからコンポーネントを動的にロードし、関連するタブで表示することです。 タブを作成するための私のアプローチは、このチュートリアルに基づいています: https://julistr.com/blog/2016/02/learning-ng2-creating-tab-component/および

これは、各コンポーネントをタブでラップしてハードコードしたい場合に最適です。悲しいことに、ng-content でコンポーネントを動的にロードしようとすると、このアプローチは失敗します。

私は yurzui によるこの回答を見ました。私が達成しようとしているものに非常に近いng-content を使用して angular2 コンポーネントを動的に作成します。

以下のコード ブロック (上記のリンクを参照) は、この例と私の例の間のギャップを埋めることができない場所です。私の例では、 createComponent() に渡すパラメータがわかりません。そして、このコードをどこに置くか、現在、このコードを保持する createTab ディレクティブがあります。「tabs」要素または「tab」要素にディレクティブを配置する必要がある場合は、オンにし続けます。

add() {
        const bodyFactory = this.cfr.resolveComponentFactory(CardBodyComponent);
        const footerFactory = this.cfr.resolveComponentFactory(CardFooterComponent);

        let bodyRef = this.vcRef.createComponent(bodyFactory);
        let footerRef = this.vcRef.createComponent(footerFactory);

        const cardFactory = this.cfr.resolveComponentFactory(CardComponent);

        const cardRef = this.vcRef.createComponent(
            cardFactory,
            0,
            undefined,
            [
               [bodyRef.location.nativeElement],
               [footerRef.location.nativeElement]
            ]
        );

        this.components.push(bodyRef, cardRef, footerRef);
    }

お持ち帰りのメッセージは、動的に作成されたコンポーネントをタブの ng-content の代わりに配置したいということです。そして、タブの ng-content はタブで埋められます。

これは、これを達成するための私の弱い試みです。http://plnkr.co/edit/ieSNgqusP0rwZBMQSvYQ?p=preview