Angular2：在行/列位置動態注入組件

我有我的Angular2應用程序與多個動態組件。我能夠創建所有這些動態組件並使用ComponentFactoryResolver將它們加載到頁面上。但問題是我想以行列方式顯示它們。我知道我創建的動態組件的行和列位置。所以我應該在該特定位置注入該組件，這是我無法實現的。Angular2：在行/列位置動態注入組件

我正在創建如下的動態組件。這裏的內容是定位點。我將所有動態組件添加到此內容中。因此，所有動態創建的組件都會一個顯示在另一個之下。但我的要求是以行/列方式顯示所有這些動態組件。我知道我的動態組件的行號/列號。

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

來源

2017-03-20 indra257

創建一個二維數組將它們全部放入行/列方式並呈現它們？ –

組件是動態創建的，組件的數量是由API驅動的。 – indra257

像http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468中所示的包裝函數可能會有幫助。 –

您在這裏沒有給我們提供很多信息。你有一些代碼能夠顯示你想要完成的細節嗎？ @BabarBilal建議將數據放置在一個二維數組中，然後可以在視圖中使用* ngFor來迭代二維數組的行/列。

data: string[][]; 


<tr *ngFor="let row of data"> 
    <td *ngFor="let col of row"> 
     {{ col.property }} 
    </td> 
</tr>

來源

2017-03-20 20:44:16 birwin

我已經更新了有關如何創建動態組件的信息，但無法按照我的要求（行/列時尚）添加到DOMDOWN – indra257

我以我們的組件以已知的列和行位置以這種方式組裝。如何以行/列方式動態顯示它們{「componentname」：C3，「val」：「1」，「col」：0，「row」：0}，{「componentname」：C1，「val」：「 2「，」col「：0，」row「：1}]; – indra257

我建議遍歷這些組件，並將它們放置在一個二維數組中，然後使用* ngFor在視圖中顯示。 – birwin

IMO，您可以創建一個組件，以迎合單元上的塊。這個組件然後將使用你正在嘗試注入的其餘組件。您所需要做的就是稍微不同地設置條件，以便Angular按照需求來負責裝載和卸載組件。

我在項目中取得了類似的結果，左側組件中的選擇和操作決定了右側4個部分中將顯示十幾個組件中的哪些組件。我只是使用ngIf來控制哪個組件會出現。希望這有助於。

如果這不是答案，那麼我想知道爲什麼你想動態創建它們，就像你在代碼示例中顯示的那樣？

來源

2017-06-21 12:17:46 Abhi

Angular2：在行/列位置動態注入組件

回答

相關問題