首页 文章

ngFor中的动态组件

提问于
浏览 次
3

我正在将角度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获取数据 . 在数据结构中，有一对多：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"
               }
            ]
         }
   ]

提前致谢

angular

1 回答

  • 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

    update <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 .

    hint 动态组件 item.type 需要是类型引用而不是字符串名称 . 因此，您需要一种从名称中获取组件类型的方法 . 您可以提供从名称返回类型的全局服务 . 您需要手动维护映射 . 有一些方法可以在TypeScript中命令性地从名称字符串中获取类型，但是我没有找到解释这个问题的答案 .

    回复于

相关问题