时间戳

首页 > 解决方案 > 动态插入角度 5

angular - 动态插入角度 5

问题描述

遵循此https://blog.thecodecampus.de/angular-2-dynamically-render-components/#comment-789，我能够通过单击链接动态创建子组件。除了我的父组件是

父.html

     <table>
     <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
         </tr>
      </thead>
      <tbody #parent>
      </tbody>
      </table>

子组件.html：

        <tr><td>Blue</td><td>23</td></tr>

子组件.ts：

       selector:"app-tr-rows";

现在，当 tr 插入到 tbody 中时，firefox 检查器给出：

     <app-tr-rows>
           <tr><td>Blue</td><td>23</td></tr>
     </app-tr-rows>

这会导致所有子行仅出现在名称列上。有什么办法？

标签： angular

解决方案

将子组件选择器更改为tr[app-row].

这意味着该组件的选择器是具有该属性的任何tr标记。app-row组件初始化后，将不再需要创建app-tr-rows标签。相反，它将创建一个tr标签。

然后，将父模板更改为 use ng-template，如下所示：

<tbody>
  <ng-template #parent></ng-template>
</tbody>

这样，行组件将被添加为 的子项tbody，而不是兄弟项。

最后，将tr子模板中的标签去掉，就变成了：

<td>Blue</td><td>23</td>

这是一个 StackBlitz 演示

推荐阅读