ngFor 内部的动态组件答案

【问题标题】：Dynamic components inside ngForngFor 内部的动态组件
【发布时间】：2016-05-30 15:12:48
【问题描述】：

我正在将 angular 1 应用程序转换为 angular 2。我有动态指令在 ng-repeat 中的 angular 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

是否可以用 angular 2 做基本相同的事情？我的数据模型会告诉我要使用什么组件以及将什么数据传递给组件。

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

"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"
               }
            ]
         }
   ]

提前致谢

【问题讨论】：

这是关于动态组件还是动态指令。标题和内容不一致。
对不起，我更正了。基本上我很乐意使用其中任何一个，如果其中一个可以工作的话。谢谢
我不太了解 Angular1。我想我在下面的答案中链接的答案可能是您想要的，否则如果您能解释您要解决的问题，那就太好了。
我不这么认为。我在上面添加了更多解释。谢谢
现在我更加确信这与下面我的答案中链接的选项卡解决方案非常相似。此外，您还需要一个从组件名称到组件类型（类）的映射，因为这是 ViewContainerRef.createComponent() 需要的。

标签： angular

【解决方案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 中强制地从名称字符串中获取类型，但我还没有找到解释这一点的 SO 问题/答案。

【讨论】：