動態組件加載在Angular2中的某個位置

我正在Angular2中開發一個新的應用程序，我有一個需求，我需要在我的應用程序中動態加載一些8個控件（網格，圖表，日曆e.t.c）。我可以動態加載所有這些控件。但我的要求是以特別的方式顯示它們，比如我無法做到的每行兩個控件。目前所有的控件都被加載，但所有的控件都在一列之中。動態組件加載在Angular2中的某個位置

下面的代碼顯示了我如何獲得小工具列表以及如何使用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;

來源

2017-03-16 indra257

向我們展示你迄今爲止做了什麼，我們可以幫助你 – YounesM

我已經更新了一些代碼的問題。在這裏，我可以動態獲取所有組件並顯示它們。但無法控制它們如何顯示。像每行兩個控件一樣。 – indra257

你的模板呢？ – YounesM

根據你說我覺得這個：你需要顯示的內容把到您的模板/ .html文件。你的打字稿將運行良好，但沒有在哪裏查看。在模板中使用div或其他內容並顯示結果。

一旦顯示出來，你可以給這個div一個類名稱，不管是什麼樣的「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} 
     } 
    }`

如果您的問題現在變成了「我如何使用模板」，那麼你需要看看在其他堆棧溢出問題，因爲這是一個多次發誓。您也可以參考角文檔，並採取Hero's Tutorial

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

來源

2017-03-16 22:04:18

我用我的一些代碼更新了這個問題。所以在這裏我能夠獲得控件/組件並將它們加載到不同的組件中。但是我無法控制這些組件在加載程序組件中的顯示位置。 – indra257

將它們加載到此組件模板並使用彈出框來實現列。 –

根據您的建議，我可以一個接一個地加載組件。但在我的情況下，我創建了一個動態組件，並且我知道我必須插入此組件的行/列位置。所以基本上，我有大量具有已知行/列位置的動態組件。我需要在我的頁面上顯示它們。 – indra257

動態組件加載在Angular2中的某個位置

回答

相關問題