ngFor中的動態組件

Question

我正在將角度1應用程序轉換為角度2.我有動態指令在ng-repeat中以角度1工作。 我離開了這個傻瓜http://plnkr.co/edit/ET3LZhXBRjwIsbKVIwxm?p=preview

<tr ng-repeat="p in people">
     <td dynamic-directive="p.dir" blah="p"></td>
</tr>

來自這個問題： ngrepeat中的Angularjs動態指令

是否可以使用角度2進行基本相同的操作？ 我的數據模型將告訴我使用什么組件以及傳遞給組件的數據。

編輯：所以我的用例是：我的網站上的主頁面可以有10個不同的小部件，每個小部件是一個不同的組件 - 目前是角度1的指令。每個組件需要不同的數據。 組件可以按任何順序排列，具體取決於站點管理員在數據庫中添加它們的方式。 我從API獲取數據。 在數據結構中，有一對多：component> data。 我需要遍歷數據並根據數據集中的組件名稱動態添加組件。 數據結構看起來像這樣。

"Topics":[
         {
            "component":"header",
            "Slug":"fake-slug",
            "URL":"some-image"
         },
         {
            "component":"standardcontent",
            "Slug":"fake-slug",
            "URL":"some-image"
         },
         {
            "component":"playlist",
            "PlayLists":[
               {
                  "CONPlaylistID":"22",
                  "description":"fake-description",
                  "image":"fake-image"
               },
               {
                 "CONPlaylistID":"22",
                  "description":"fake-description",
                  "image":"fake-image"
               }
            ]
         }
   ]

提前致謝

Answer 1

指令只能通過與指令選擇器匹配的靜態HTML添加，並且沒有其他機制可以依賴指令實例化。

您可以使用兩個類似的元素，其中一個匹配指令選擇器而另一個不匹配，並在它們之間切換：

<tr *ngFor="let p of people">
  <td *ngIf="doAddDirective" dynamic-directive="p.dir" blah="p"></td>
  <td *ngIf="!doAddDirective" blah="p"></td>
</tr>

如果它是關於組件而不是指令，那么您可能希望使用用戶單擊所選組件的Angular 2動態選項卡

更新 <dcl-wrapper>一些解釋：

有兩個主要的東西，其余的只是將它包裝在一個組件中以便於重用。

第一個是ViewContainerRef以及如何獲取它。 這定義了動態組件的添加位置。 您可以注入ViewContainerRef然后將動態組件添加到當前組件的下方（而不是內部）
或者您可以使用@ViewChild(..., {read: ViewContainerRef})從當前組件的模板中的元素獲取它，然后將動態添加的元素插入該元素下面。

第二部分是使用target.createComponent() resolveComponent() ，它是實際插入動態組件的代碼。

dcl-wrapper組件使聲明性地添加動態組件變得容易。 只需添加

<dcl-wrapper [type]="item.type"></dcl-wrapper>

到您的模板（假設item來自*ngFor表示您的JSON項目）。

這將向組件添加<dcl-wrapper></dcl-wrapper>組件，然后<dcl-wrapper>將添加由item.type返回的動態組件。 <dcl-wrapper>的其他代碼用於當item.type更改時刪除以前添加的動態組件並添加一個item.type現在引用。

提示動態組件item.type必須是類型引用而不是字符串名稱。 因此，您需要一種從名稱中獲取組件類型的方法。 您可以提供從名稱返回類型的全局服務。 您需要手動維護映射。 有一些方法可以在TypeScript中命令性地從名稱字符串中獲取類型，但是我沒有找到解釋這個問題的答案。