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>

来自这个问题：Angularjs dynamic directive inside ngrepeat

是否可以使用角度2进行基本相同的操作？我的数据模型将告诉我使用什么组件以及传递给组件的数据。

编辑：所以我的用例是：我网站上的主页面可以有10个不同的小部件，每个小部件都是不同的组件 - 目前是角度1的指令。每个组件都需要不同的数据。组件可以按任何顺序排列，具体取决于站点管理员在数据库中添加它们的方式。我从API获取数据。在数据结构中，存在一对多：组件＆gt;数据。我需要遍历数据并根据数据集中的组件名称动态添加组件。数据结构看起来像这样。

"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 dynamic tabs with user-click chosen components

<强>更新一些解释<dcl-wrapper>的作用：

主要有两个方面，其余的只是将它包装在一个组件中以便于重用。

第一个是ViewContainerRef以及如何获得它。这定义了动态组件的添加位置。您可以注入ViewContainerRef，然后动态组件将添加到当前组件的下方（而不是内部）或者您可以使用@ViewChild(..., {read: ViewContainerRef})从当前组件的模板中的元素获取它，然后将动态添加的元素插入该元素下方。

第二部分是resolveComponent() target.createComponent()，它是实际插入动态组件的代码。

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

ngFor中的动态组件

1 个答案: