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中命令性地从名称字符串中获取类型，但是我没有找到解释这个问题的答案。