Question

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

parent.html

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

子component.html：

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

子component.ts：

       selector:"app-tr-rows";

现在，将tr插入到tbody中时，Firefox检查器会给出：

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

导致所有子行仅出现在“名称”列上。怎么了？

Answer 1

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

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

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

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

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

最后，从子模板中删除tr标记，使其变为：

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

Here is a StackBlitz demo

动态插入角度5

1 个答案: