Angular2の特定の場所にロードされる動的コンポーネント

Question

私はAngular2で新しいアプリケーションを開発しています。私はアプリケーションで動的に8つのコントロール（グリッド、チャート、カレンダーe.t.c）をロードする必要があります。私はすべてのコントロールを動的に読み込むことができます。しかし、私の要求は、私が行うことができない行ごとに2つのコントロールのようなファッションでそれらを表示することです。現在のところ、すべてのコントロールがロードされていますが、すべてが1つの列の中にあります。

以下のコードは、ガジェットリストの取得方法と、viewContainerRefを使用してコンポーネントに追加する方法を示しています。しかし、私はこのコンポーネントがどこに表示されるのかを制御することができませんでした。

for (let gadget of gadgets) { 
         this.userService.getGadgetsData(gadget.Id).subscribe(gadgetsData => { 

          switch (gadget.Name) { 
           case "PieChart": 

            this.donughtChartData = gadgetsData.Data.Issues.map((v: any) => ({ 
             category: v.Values[0].Value, 
             value: v.Values[2].Value, 
            })); 

            const factory = this.componentFactoryResolver.resolveComponentFactory(DonutComponent); 
            const ref = this.viewContainerRef.createComponent(factory); 
            ref.instance.donutchartData = this.donughtChartData; 
            ref.changeDetectorRef.detectChanges(); 

            break; 

Answer 1

は、あなたが、私はこれを考えて言ったことに基づいて： あなたはがあなたのテンプレート/ .htmlのファイルにを入れてコンテンツを表示する必要があります。あなたのタイスクリプトは正常に動作しますが、表示する場所はありません。あなたのテンプレートでdivや何かを使って、その結果を表示してください。

一度表示されると、ex "class = 'flex-box'のクラス名を与えて下のスタイルを適用できます。自動的に列に整列され、わかりやすくなります。読み取りをリンク

あなたが列を達成するためにフレックス使用したいここ

例：。

`ul{ 
    list-style-type: none; 
    display: flex; 
    flex-wrap: wrap; 
    li{ 
     flex: 6 1 ; //the number refer to how much/fast the item will grow/shrink 
     .form-control-item {//...some css} 
     } 
    }` 

あなたの質問は今、「私はテンプレートを使用するにはどうすればよい」をあなたが見る必要があるに判明した場合他のスタックオーバーフローQでは、これは何度も怒った。あなたはまた、角度のドキュメントを参照してください、そしてHero's Tutorial

https://css-tricks.com/snippets/css/a-guide-to-flexbox/